首页 > js学习 > js基础知识 > jQuery中DOM节点的元素样式(css)操作
2016
12-16

jQuery中DOM节点的元素样式(css)操作

元素样式操作包括了直接设置CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。

css(name):获取某个元素行内的CSS 样式

css([name1, name2, name3]):获取某个元素行内多个 CSS 样式,返回数组

css(name, value):设置某个元素行内的CSS 样式

css(name, function (index, value)):设置某个元素行内的CSS 样式

css({name1 : value1, name2 : value2}):设置某个元素行内多个 CSS 样式

addClass(class):给某个元素添加一个CSS 类

addClass(class1 class2 class3...):给某个元素添加多个CSS 类

removeClass(class):删除某个元素的一个CSS 类

removeClass(class1 class2 class3...):删除某个元素的多个CSS 类

toggleClass(class):来回切换默认样式和指定样式

toggleClass(class1 class2 class3...):同上

toggleClass(class, switch):来回切换样式的时候设置切换频率

toggleClass(function (){}):通过匿名函数设置切换的规则

toggleClass(function (){}, switch):在匿名函数设置时也可以设置频率

toggleClass(function (index, claccName, switch){}, switch):在匿名函数设置时传递三个参数

var box = $('#box').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象

传统遍历方法:for (var i in box) {alert(i + ':' + box[i]);}//逐个遍历出来

jQuery 提供了一个遍历工具专门来处理这种对象数组,$.each()方法,这个方法可以轻松的遍历对象数组。

遍历 JavaScript 原生态的对象数组:$.each(box, function (attr, value) {alert(attr + ':' + value);});

遍历 jQuery对象的数组:$('div').each(function (index, element) {alert(index + ':' + element);});//index 为索引,element为元素 DOM

在需要设置多个样式的时候,我们可以传递多个CSS 样式的键值对即可。

$('div').css({'background-color' : '#ccc','color' : 'red','font-size' : '20px'});

如果想设置某个元素的 CSS 样式的值,但这个值需要计算我们可以传递一个匿名函数。

$('div').css('width', function (index, value) {return (parseInt(value) - 500) + 'px';});

var count = 0;

$('div').click(function () {$(this).toggleClass('red', count++ % 3 == 0);});//每点击两次切换一次 red

CSS 方法:jQuery 不但提供了CSS 的核心操作方法,比如.css()、.addClass()等。还封装了一些特殊功能的CSS 操作方法

width():获取某个元素的长度

width(value):设置某个元素的长度

width(function (index, width) {}):通过匿名函数设置某个元素的长度,index 是索引,value是原本值

height():获取某个元素的长度

height(value):设置某个元素的长度

height(function (index, width) {}):通过匿名函数设置某个元素的长度,index 是索引,value是原本值

内外边距和边框尺寸方法

innerWidth():获取元素宽度,包含内边距padding

innerHeight():获取元素高度,包含内边距padding

outerWidth():获取元素宽度,包含边框border和内边距 padding

outerHeight():获取元素高度,包含边框border和内边距 padding

outerWidth(ture):同上,且包含外边距

outerHeight(true):同上,且包含外边距

元素偏移方法

offset():获取某个元素相对于视口的偏移位置

position():获取某个元素相对于父元素的偏移位置

scrollTop():获取垂直滚动条的值

scrollTop(value):设置垂直滚动条的值

scrollLeft():获取水平滚动条的值

scrollLeft(value):设置水平滚动条的值

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。