HTML中dom元素设置样式,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)：设置水平滚动条的值

最后编辑：2019-12-13作者：qingheluo

这个作者貌似有点懒，什么都没有留下。