jQuery操作css样式

.css()方法:获取或设置元素的css

1.设置元素的css

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

(1) 单个样式设置

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

(2) 多个样式设置

  //多个样式设置
   $('.btn').css({
       width:'100px',
       height:'30px',
       color:'#fff',
       backgroundColor:'#000',
       fontSize:'13px'
   });
1
2
3
4
5
6
7
8

匿名函数写法

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

获取元素的css

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

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

CSS的尺寸属性

也可以写成匿名函数形式

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

CSS的位置属性

偏移操作

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

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

匿名函数写法

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

获取和设置上滑距

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

获取和设置左滑距

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