jQuery--CSS样式操作

参数说明

参数	说明
name	要访问的属性名称
properties	要设置为样式属性的名/值对
value	属性值
function(index, value)	此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。
coordinates{top,left}	必需。规定以像素计的 top 和 left 坐标。
function(index,coords)	规定返回被选元素新偏移坐标的函数。
val	设定滚动条值

       .box{
           border: 10px solid red;
           width: 100px;
           height: 100px;
           padding: 10px;
           margin: 20px;
       }
       .parent{
           width: 200px;
           height: 300px;
           border: 1px solid #000;
           overflow-y: scroll;
           overflow-x: scroll;
           white-space: nowrap;
       }
	<button class="btn">按钮</button>
	<div class="box"></div>
	<div class="parent">
   	css(name pro [,val fn]<br/>访问匹配元素的样式属性。<br/>
   	height([val fn])<br/>取得匹配元素当前计算的高度值（px）<br/>
   	width([val fn])<br/>取得第一个匹配元素当前计算的宽度值（px）<br/>
   	innerHeight()<br/>获取第一个匹配元素内部区域高度（包括补白、内间>距、内容、不包括边框） <br/>
   	innerWidth()<br/>获取第一个匹配元素内部区域宽度（包括补白、内间>距、内容、不包括边框） <br/>
   	outerHeight([options])<br/>获取第一个匹配元素外部高度（包括内间>距、内容、边框）参数默认时false，若为true时，计算边距在内 <br/>
   	outerWidth([options])<br/>获取第一个匹配元素外部宽度（包括内间距、>内容、边框）参数默认时false，若为true时，计算边距在内<br/>
   	offset([coordinates]<br/>获取匹配元素在当前视口的相对偏移。 <br/>
   	position()<br/>获取匹配元素相对父元素的偏移.<br/>
   	scrollTop([val])<br/>获取匹配元素相对滚动条顶部的偏移。 <br/>
   	scrollLeft([val])<br/>获取匹配元素相对滚动条左侧的偏移<br/>
	</div>

一、获取或设置元素的css

• 以下空格代表或。

方法	概述
css(name pro [,val fn])	访问匹配元素的样式属性。

1.设置元素的css

• 设置元素的css的时候，可以单个样式或者多个样式一次性设置。

(1) 单个样式设置

   //单个样式设置
   $('.btn').css('width','100px').css('height','30px').css('color','red');

(2) 多个样式设置

   //多个样式设置
   $('.btn').css({
       width:'100px',
       height:'30px',
       color:'#fff',
       backgroundColor:'#000',
       fontSize:'13px'
   });

(3) 匿名函数写法

    $('.btn').css("color",function(index){
        console.log(index);//当前对象的索引
        return 'blue';
    }) 

2.获取元素的css

• 获取每次只能获取一个，不能多个获取。

	console.log($('.btn').css('width'));//96px--内容区域的宽度

二、CSS的尺寸属性

• 以下空格代表或。

方法	概述
height([val fn])	取得匹配元素当前计算的高度值（px）
width([val fn])	取得第一个匹配元素当前计算的宽度值（px）
innerHeight()	获取第一个匹配元素内部区域高度（包括补白、内间距、内容、不包括边框）
innerWidth()	获取第一个匹配元素内部区域宽度（包括补白、内间距、内容、不包括边框）
outerHeight([options])	获取第一个匹配元素外部高度（包括内间距、内容、边框）参数默认时false，若为true时，计算边距在内
outerWidth([options])	获取第一个匹配元素外部宽度（包括内间距、内容、边框）参数默认时false，若为true时，计算边距在内

• height----元素的内容区域高
• width----元素的内容区域宽
• innerHeight()----元素的高（内容区域+补白区域）
• innerWidth()----元素的宽（内容区域+补白区域）
• outerHeight----元素的实际高 （内容区域+补白区域，设置参数算外间距）参数默认时false，若为true时，计算边距在内
• outerWidth----元素的实际宽 （内容区域+补白区域，设置参数算外间距）参数默认时false，若为true时，计算边距在内

   console.log($('.box').width());//100
   console.log($('.box').height());//100
   console.log($('.box').innerWidth());//120
   console.log($('.box').innerHeight());//120
   console.log($('.box').outerWidth(true));//180
   console.log($('.box').outerHeight(true));//180

• 也可以写成匿名函数形式

    $("button").width(function (index){
        console.log(index);//0
        return 100;
    }); 

三、CSS的位置属性

• 以下空格代表或。

方法	概述
offset([coordinates])	获取匹配元素在当前视口的相对偏移。
position()	获取匹配元素相对父元素的偏移.
scrollTop([val])	获取匹配元素相对滚动条顶部的偏移。
scrollLeft([val])	获取匹配元素相对滚动条左侧的偏移。

1.偏移操作

• 设置偏移，会让元素默认相对定位。

   console.log($('.box').offset());//{top: 50, left: 20}
   //设置偏移，会让元素默认相对定位
   $('.box').offset({left:0,top:10});
   //获取的是相对父容器的偏移(position只能获取，不能设置)
   console.log($('.box').position());//{top: -10, left: -20}

• 匿名函数写法

    $("#btn").offset(function (index, oldvalue) {
        console.log(index, oldvalue);//当前元素的索引和 原始偏移值
        //这里必须返回
        return {left: 100, top: 100};
    }); 

2.获取和设置上滑距

   //获取上滑距
   console.log($('.parent').scrollTop());//0
   //设置上滑距
   $('.parent').scrollTop(100);
   console.log($('.parent').scrollTop());//100

3.获取和设置左滑距

   //获取左滑距
   console.log($('.parent').scrollLeft());//0
   //设置上滑距
   $('.parent').scrollLeft(100);
   console.log($('.parent').scrollLeft());//100