jQuery提供了一种简单、方便的方式来操作DOM元素的样式。这些操作可以单独使用,也可以组合在一起使用以满足更复杂的需求。
-
css()
函数:- 获取一个样式:
$(selector).css(propertyName)
。这等同于使用DOM元素的style
属性直接访问样式名称(需要使用驼峰式命名)。例如:$('#myElement').css('backgroundColor')
。 - 设置一个样式:
$(selector).css(propertyName, value)
。这等同于使用DOM元素的style
属性直接设置样式值(需要使用驼峰式命名)。例如:$('#myElement').css('backgroundColor', 'red')
。 - 批量设置样式:
$(selector).css({ propertyName: value, propertyName: value })
。这等同于一次性设置多个样式,例如:$('#myElement').css({ 'background-color': 'red', 'font-size': '16px' })
。
- 获取一个样式:
-
addClass()
函数:用于向选定的元素添加一个或多个类。例如:$('#myElement').addClass('myClass')
。 -
removeClass()
函数:用于从选定的元素移除一个或多个类。例如:$('#myElement').removeClass('myClass')
。 -
toggleClass()
函数:用于切换选定元素的一个或多个类。如果类存在则移除,如果不存在则添加。例如:$('#myElement').toggleClass('myClass')
。
此外,jQuery还提供了其他一些操作样式的函数,例如 hasClass()
(检查元素是否包含某个类)、addClass()
和 removeClass()
(添加或删除多个类)以及 toggleClass()
(切换类)。