jquery css

jQuery 操作 CSS 的方法

jQuery 提供了多种方法来操作元素的 CSS 样式，包括获取、设置、添加或移除样式。以下是常用的方法：

获取 CSS 属性值

使用 .css() 方法获取元素的 CSS 属性值：

var color = $('div').css('color');

这将返回第一个匹配的 <div> 元素的 color 属性值。

设置单个 CSS 属性

通过 .css() 方法设置单个属性：

$('div').css('color', 'red');

将所有 <div> 元素的文字颜色设置为红色。

设置多个 CSS 属性

传递一个对象来同时设置多个属性：

$('div').css({
  'color': 'red',
  'background-color': 'blue',
  'font-size': '16px'
});

添加或移除 CSS 类

使用 .addClass() 和 .removeClass() 动态添加或移除类：

$('div').addClass('highlight');
$('div').removeClass('inactive');

切换 CSS 类

通过 .toggleClass() 切换类的存在状态：

$('div').toggleClass('active');

如果元素有 active 类则移除，否则添加。

直接操作样式属性

jQuery 还支持直接操作某些样式属性，如 .width() 和 .height()：

var width = $('div').width();
$('div').height(200);

注意事项

• .css() 方法获取的值是计算后的样式，可能与原始设置不同。
• 对于性能敏感的操作，直接使用原生 JavaScript 的 style 属性可能更快。
• 修改多个样式时，使用 CSS 类切换比逐个修改属性更高效。