一、attr()方法
$(selector).attr(attribute)设置或获取被选元素的属性值
console.log($(".box").attr("a")); $(".box").attr("b", 20); $(".box").attr({ b: 20, title: "这是一个div" }); $(".box").removeAttr("a");
二、prop()方法
console.log($(".box").prop("a")); //undefined
console.log($(".box").prop("title"));
三、偏移量
jquery对象.offset().left 元素对象距离文档左侧的偏移量
jquery对象.offset().left 元素对象距离文档上侧的偏移量
dom对象.offsetLeft 元素距离offsetParent左侧的偏移量
dom对象.offsetTop 元素距离offsetParent上侧的偏移量
四、尺寸获取
返回/设置jquery对象的内容区域大小
jQuery对象.height()/jQuery对象.height(数值)
jQuery对象.width()/jQuery对象.width(数值)
返回/设置jquery对象的大小 内容+内边距padding
jQuery对象.innerHeight()/jQuery对象.innerHeight(数值)
jQuery对象.innerWidth()/jQuery对象.innerWidth(数值)
返回/设置jquery对象的大小 内容+内边距padding+边框border
jQuery对象.outerHeight()/jQuery对象.outerHeight(数值)
jQuery对象.outerWidth()/jQuery对象.outerWidth(数值)
内容+内边距padding+边框border
jQuery对象.outerHeight(true);
jQuery对象.outerWidth(true);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="js/jquery-3.6.0.min.js"></script> <style> .box { width: 300px; height: 300px; padding: 10px; border: 5px solid #999; margin: 10px; background-color: #f00; } </style> </head> <body> <div class="box">hello</div> <button>按钮</button> </body> <script> $("button").click(function () { console.log($(".box").height()); //获取内容区域大小 console.log($(".box").width()); //获取内容区域大小 $(".box").width(500); console.log($(".box").innerWidth()); //包含padding+内容 console.log($(".box").innerHeight()); //包含padding+内容 $(".box").innerWidth(500); //内容+padding console.log($(".box").outerWidth()); //返回盒子大小 内容+padding+border console.log($(".box").outerHeight()); //返回盒子大小 内容+padding+border $(".box").outerWidth(500); }); </script> </html>
五、滚动条滚动距离
jQuery对象.scrollTop() 获取滚动条垂直方向滚动距离
jQuery对象.scrollLeft() 获取滚动条水平方向滚动距离
jQuery对象.scrollTop(数值) 获取滚动条垂直方向滚动距离
jQuery对象.scrollLeft(数值) 获取滚动条水平方向滚动距离