jQuery attr方法:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery attr</title> </head> <body> <img src="./img/view.jpg" alt="view" title="风景" width="300" > </body> <script type="text/javascript" src="./js/jquery-3.3.1.js"></script> <script type="text/javascript"> // 获取固有属性 var attr=$('img').attr('alt') // 设置固有属性 var attr=$('img').attr('width',400) var attr=$('img').attr('style','border-radius:50%;box-shadow:3px 3px 3px #888') var attr=$('img').attr('width',function(){ return 400-200}) // 设置自定义属性 var size=$('img').attr('data-size') $('img').removeAttr('style') console.log(attr) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
jquery css 方法:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery css 方法</title> </head> <body> <img src="./img/freeze.jpg" alt="freeze" title="云"> </body> <script type="text/javascript" src="./js/jquery-3.3.1.js"></script> <script type="text/javascript"> var attr=$('img').css('width',200) var attr=$('img').css('border-radius','20%') var attr=$('img').css('box-shadow','3px 3px 3px #66997B') // 合并写法 var attr=$('img').css({ 'width':'200', 'border-radius':'20%', 'box-shadow':'3px 3px 3px #66997B' }) var res=$('img').css('box-shadow') // 宽,高 var attr=$('img').width(300) var attr=$('img').width() var attr=$('img').height(300) var attr=$('img').height() var res=$('img').offset() // left,top 属性 var res=$('img').offset().left var res=$('img').offset().top // 绝对定位 var res=$('img').position().left var res=$('img').position().top var res=$('img').scrollLeft() var res=$('img').scrollTop() console.log(res) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
jquery attr 方法可以获取标签的固有属性和自定义属性,同时也可以设置固有,自定义属性。自定义属性设置时加data-前缀,获取标签中的data-XX属性不需要加前缀。
jquery css 方法设置属性,可以将多个css属性写在一起。获取宽高时用heigh(),wid替换()方法,更便捷。
手抄: