CSS操作
- 功能：设置或者修改样式，操作的是style属性。
- 操作单个样式
// name：需要设置的样式名称 // value：对应的样式值 // $obj.css(name, value); // 使用案例 $(‘#one‘).css(‘background‘,‘gray‘);// 将背景色修改为灰色
- 设置多个样式
// 参数是一个对象，对象中包含了需要设置的样式名和样式值 // $obj.css(obj); // 使用案例 $(‘#one‘).css({ ‘background‘:‘gray‘, ‘width‘:‘400px‘, ‘height‘:‘200px‘ });
- 获取样式
// name:需要获取的样式名称 // $obj.css(name); // 案例 $(‘div‘).css(‘background-color‘);
注意：获取样式操作只会返回第一个元素对应的样式值。
<body> <input type="button" id="btn" value="变身"> <br> <img src="lz.jpg"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $(‘#btn‘).click(function(){ //修改图片的样式 宽度 $(‘img‘).css(‘width‘, ‘800px‘); //获取样式 console.log($(‘img‘).css(‘width‘)); //批量设置 $(‘img‘).css({ "width":‘800px‘, "height":"300px" }); // $(‘img‘).css(‘width‘, ‘800px‘).css(‘height‘, ‘300px‘); }); }); </script> </body>
jquery尺寸和位置操作
width方法与height方法
- 设置或者获取高度，不包括内边距、边框和外边距
// 带参数表示设置高度 $(‘img‘).height(200); // 不带参数获取高度 $(‘img‘).height();
- 获取网页的可视区宽高
// 获取可视区宽度 $(window).width(); // 获取可视区高度 $(window).height();
innerWidth/innerHeight/outerWidth/outerHeight
innerWidth()/innerHeight() 方法返回元素的宽度/高度（包括内边距）。 outerWidth()/outerHeight() 方法返回元素的宽度/高度（包括内边距和边框）。 outerWidth(true)/outerHeight(true) 方法返回元素的宽度/高度（包括内边距、边框和外边距）。
scrollTop与scrollLeft
- 设置或者获取垂直滚动条的位置
// 获取页面被卷曲的高度 $(window).scrollTop(); // 获取页面被卷曲的宽度 $(window).scrollLeft();
offset方法与position方法
- offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素(offsetParent)的位置。
// 获取元素距离document的位置,返回值为对象：{left:100, top:100} $(selector).offset(); // 获取相对于其最近的有定位的父元素的位置。 $(selector).position();