1、操作CSS样式方法css()
1.1、获取:jqobj.css(cssattr);
1.2、逐个设置jqobj.css(cssattr,value);
1.3、链式设置jqobj.css(cssattr1,value1).css(cssattr2,value2);
1.4、批量设置jqobj.css({cssattr1:value1,cssattr2,value2});
1.5、注意点:CSS属性名和属性值均以字符串形式传入,属性值带单位的要带上单位传入。
2、元素宽高
width()、height()
获取:jqobj.width(),jqobj.height(),获取到的值是以px为单位的数值
设置宽度:jqobj.width(30)==jqobj.width("30")==jqobj.width("30px")!=jqobj.width("30pt") 设置高度同理
3、定位偏移量
offset():获取元素距离DOM文档左边界和上边界的偏移量:offset().left、offset().top
设置:offset({left:10,top:20});设置后该元素position属性值被设置为relative; 且left和top属性值被设置为经计算后会满足偏移量的值 offset()方法获取到的是数值,设置时left和top及其属性值可带可不带引号,且属性值不能带单位
position():获取元素距离定位元素的偏移量,即读取css属性的left和top值,只能获取不能设置
4、滚动偏移量
scrollTop()、scrollLeft()
注意点: 为了保证浏览器的兼容,
获取网页滚动偏移位需按照如下写法:$("html,body").scrollTop();
设置网页滚动偏移位需按照如下写法:$("html,body").scrollTop(300);
总结:操作2、3、4点的相关方法时,传参时最好统一格式为不带引号和单位
5、综合案例
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box{ width:800px; height:900px; position:absolute; left:100px; top:200px; background:pink; } div{ width:250px; height:30px; background:green; } #box div:nth-of-type(odd){ background:red; } </style> <script src="js/jquery-1.12.4.min.js"></script> </head> <body> <div id="box"> <div id="div1">点我获取并改变宽度</div> <div id="div2">点我获取并改变窗口偏移量</div> <div id="div3">点我获取最近定位元素偏移量</div> </div> <script> $(function(){ $("#div1").click(function(){ alert($(this).width()); $(this).width(500); }); $("#div2").click(function(){ alert("left:"+$(this).offset().left+" top:"+$(this).offset().top); $(this).offset({left:"300",top:300}); }); $("#div3").click(function(){ alert("left:"+$(this).position().left+" top:"+$(this).offset().top); }); }); </script> </body> </html>