Correction status:qualified
Teacher's comments:
<!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>
点击 "运行实例" 按钮查看在线实例
手抄部分: