实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr()</title>
</head>
<body>
<!-- 引用图片，宽为300 -->
<img src="./images/fbb.jpg" width="300" alt="范冰冰" title="明星" id="img" country="中国">
<div class="box"></div>
</body>
<!-- 引入本地jquery -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 定义 ID选中#img 设置样式为 圆角25%，阴影4px 灰色
var res = $('#img').attr('style', 'border-radius:25%;box-shadow:4px 4px 4px #888')
// 定义img元素：设置回调函数：宽值300+50=350px;
var res = $('img').attr('width',function(){return 300+50})
// 赋值给width
var res = $('img').attr('width')
// 设置图片宽高为200px
var res = $('img').width('200px')
var res = $('img').height('200px')
// 获取元素的位置 TOP8 LEFT8 Object {top: 8, left: 8} 只能获取不能设置
// var res = $('img').offset()
// // 获取左边位置
// var res = $('img').offset().left
// // 获取头部位置
// var res = $('img').offset().top
console.log(res)
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
background-color: skyblue;
position: relative;
}
.box1{
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top:50px;
left:100px;
}
</style>
</head>
<body>
<img src="./images/6.jpg">
<div class="box">
<div class="box1"></div>
</div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// 设置样式宽，圆角，阴影
var res = $('img').css('width',200)
var res = $('img').css('border-radius','10%')
var res = $('img').css('box-shadow','3px 3px 3px #888')
// 获取img元素的宽度
var res = $('img').css('width')
//返回的是字符串,parseint转换为数值
var res = parseInt($('img').css('width'),10)
res += 50
var res = $('img').css('width',res+'px')
// 查询img元素左边和顶部偏移量
var res = $('img').offset()
// 查询box元素绝对定位元素的偏移量
var res = $('.box1').position().top
console.log(res)
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄部分：
