一:操作css样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <script type="text/javascript"> $(function () { //1:逐个设置 $("div").css("width", "100px"); $("div").css("height", "100px"); $("div").css("background", "red"); //2:链式设置,链式操作如果大于3步,建议分开 $("div").css("width", "100px").css("height", "100px").css("background", "red"); //3:批量设置 $("div").css({ width: "100px", height: "100px", background: "red" }) //4:获取css样式值 console.log($("div").css("background")); }) </script> </head> <body> <div></div> </body> </html>
二:操作css位置和尺寸
width:实际宽度
innerWidth:实际宽度+内边距
outerWidth:实际宽度+内边距+边框
outerWidth(true):实际宽度+内边距+边框+外边距
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <style> * { margin: 0; padding: 0; } .father { width: 200px; height: 200px; background-color: red; border: 50px solid blueviolet; margin-left: 50px; position: relative; } .son{ width: 100px; height: 100px; background-color: cadetblue; position: absolute; left: 50px; top:50px; } </style> <script type="text/javascript"> $(function () { var btns=document.getElementsByTagName("button"); //监听获取 btns[0].onclick=function(){ console.log($(".father").width()); } btns[1].onclick=function(){ $(".father").width("500px"); } }) </script> </head> <body> <div class="father"> <div class="son"></div> </div> <button>获取</button> <button>设置</button> </body> </html>
offset和position方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <style> * { margin: 0; padding: 0; } .father { width: 200px; height: 200px; background-color: red; border: 50px solid blueviolet; margin-left: 50px; position: relative; } .son { width: 100px; height: 100px; background-color: cadetblue; position: absolute; left: 50px; top: 50px; } </style> <script type="text/javascript"> $(function () { /*offset([coordinates]) 作用:获取元素距离窗口的偏移位 即元素到浏览器边框 */ var btns = document.getElementsByTagName("button"); btns[0].onclick = function () { console.log($(".son").offset().left); } //距离浏览器的偏移位 btns[1].onclick = function () { $(".son").offset({ left: 10 //offset不用加px,因为其返回值就是没有px单位 }) } /* position() 作用:获取元素距离定位元素的偏移位 注意:Position方法只能获取不能设置 */ btns[2].onclick = function () { console.log($(".son").position().left); } }) </script> </head> <body> <div class="father"> <div class="son"></div> </div> <button>获取</button> <button>设置</button> <button>获取2</button> </body> </html>
scrollTop方法:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <style> * { margin: 0; padding: 0; } .scroll{ width: 100px; height: 250px; border: 1px solid red; overflow: auto; } </style> <script type="text/javascript"> $(function () { var btns=document.getElementsByTagName('button'); //获取滚动的偏移位 btns[0].onclick=function(){ console.log($('.scroll').scrollTop()); //获取网页滚动的偏移位 在IE里使用body才有值 console.log($('html').scrollTop()); //兼容写法 为了保证浏览器的兼容,需要按照如下写法 console.log($('html').scrollTop()+$('body').scrollTop()); } //设置滚动的偏移位 btns[1].onclick=function(){ $('.scroll').scrollTop(300);//传字符串不行,说明里面接收不是一个字符串 //设置网页滚动的偏移位 $('html').scrollTop(500); } }) </script> </head> <body> <div class="scroll">我是div我是brdi我是div我是divv我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div 我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div 我是div我是div我是div我是div我是div我是div我是div我是div我是div我是divv我是div我是div 我是div我是div我是div </div> <button>获取</button> <button>设置</button> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </body> </html>