jQuery-处理css样式

1、css方法
获取匹配元素集合中的第一个元素的样式属性的值 或 设置每个匹配元素的一个或多个CSS属性
1)获取并设置单个css值
jQuery对象.css('css属性');
jQuery对象.css('css属性','值');
2)获取多个css属性
jQuery对象.css(css属性数组);
3)一次设置多个css样式属性
jQuery对象.css(css属性与值的对象);
4)以相对值设置样式属性
jQuery对象.css('css属性','+=10');//数字值之前加上+=或者-=
这种方式仅适用于数值单位表示的css属性
5)给第二个参数传入函数来设置样式属性
函数接受两个参数
第一个参数表示当前元素的序号
第二个参数表示当前元素当前属性的值
函数内部this代表当前的html元素对象
返回设置的样式
$('#div1').css('background',function(i,currentValue){
return 设置的属性值;
});
2、针对具体属性的css便捷方法
除了css方法之外,jQuery还定义了许多方法,用来获取或设置常用css属性及其相关信息!
1)width方法
参数说明:
1>无参数
得到jQuery对象中第一个元素的宽度
2>数值或者字符串
设置jQuery对象中所有元素的宽度
3>传入函数
使用函数来设置jQuery对象中所有元素的宽度
两个参数:第一个表示当前元素序号,第二个参数表示当前元素的当前宽度
函数内部this代表当前的html元素对象
返回要设置的值
2)height方法
使用方法同上
作用,获取元素的高度
设置元素的高度
3)scrollTop方法
参数说明:
1>无参数
得到jQuery对象中第一个元素垂直滚动条的位置
2>数值
设置jQuery对象中所有元素的垂直滚动条的位置
4)scrollLeft方法
使用方法同上
作用,获取/设置 页面或者具体元素水平方向滚动条的位置
5)outerWidth方法
得到jQuery对象中第一个元素的宽度,包括内边距和边界
参数说明:
false:默认,表示不包括外边距
true:表示包括外边距
传入长度字符串或者数值来设置outerWidth
传入函数进行设置
函数接收元素的索引位置的设置和旧的outerWidth作为参数
this代表当前元素的对象
6)outerHeight方法
使用方法同上
得到jQuery对象中第一个元素的高度,包括内边距和边界
参数同上
7)innerWidth方法
得到jQuery对象中第一个元素的内部宽度,包括内边距,但不包括边界和外边距
参数说明:
传入长度字符串或者数值来设置innerWidth
传入函数进行设置
函数接收元素的索引位置的设置和旧的innerWidth作为参数
this代表当前元素的对象
8)innerHeight方法
使用方法同上
得到jQuery对象中第一个元素的内部高度,包括内边距,但不包括边界和外边

posted @ 2016-10-16 20:07  舒山  阅读(2340)  评论(0编辑  收藏  举报