attr方法:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="../images/jsy.jpg" width="200" alt="美女" title="明星" id="pic" data-nation="中国"> </body> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> var res = $('#pic').attr('src')//获取当前属性值,单参数是获取 //双参数为获取,第一个是属性名,第二个是要设置的新值 $('#pic').attr('src','../images/gyy.jpg') $('#pic').attr('style','border-radius:50%;box-shadow:2px 2px 2px #888') var res = $('#pic').attr('data-nation') //回调函数 $('#pic').attr('width',function(){return 100+90}) var res=$('#pic').attr('width') //2. removeAttr():删除元素的属性 $('#pic').removeAttr('style') //删除多个属性 var res=$('#pic').removeAttr('alt title data-nation') console.log(res) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box1 { width: 300px; height: 300px; background-color: wheat; position: relative; } .box2 { width: 100px; height: 100px; background-color: coral; position: absolute; top: 50px; left: 100px; } </style> </head> <body> <img src="../images/jsy.jpg"> <div class="box1"> <div class="box2"></div> </div> </body> <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> <script type="text/javascript"> //1设置css样式(name,value) var res = $('img').css('width',200) var res = $('img').css('border-radius','50%') var res =$('img').css('box-shadow','2px 2px 2px #888') //width()和height()方法 var res = $('img').css('width',500) var res = $('img').css('height',900) //获取元素的位置:offset(),返回的是一个对象 var res = $('img').offset() //.查看绝对定位元素的偏移量: position() var res = $('.box2').position().left var res = $('.box2').position().top console.log(res) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例