jQuery操作元素css样式的三种方法

当需要使用JS做一些动态的效果时，我们通常会操作元素的css属性。而 jQuery 作为一款非常优秀的 JS 框架，其提供了多种便利的操作 DOM 元素的方法，操作元素的 css 样式也是其中之一。

下面，我将为大家详细介绍 jQuery 操作元素 css 样式的三种方法：

1. 使用 .css() 方法

调用 .css() 方法改变元素的 CSS 属性。它接受两个参数，第一个参数是要修改的 CSS 属性名称，第二个参数是要为该属性设置的值，可以是任何合法的 CSS 值。使用 .css() 方法时，可以通过一个对象来设置多个属性。

// 对元素的样式属性进行更改
$('p').css('color', 'red');
$('p').css('background-color', 'yellow');

// 使用对象来设置多个CSS样式属性
$('p').css({
  'color': 'red',
  'background-color': 'yellow'
});

2. 使用 .addClass() 方法

调用 .addClass() 方法向元素添加一个或多个类名。多个类名可以用空格分隔。

// 添加单个类名
$('p').addClass('my-class');

// 添加多个类名
$('p').addClass('class1 class2');

3. 使用 .toggleClass() 方法

调用 .toggleClass() 方法在元素的类名列表中切换一个或多个类名。

// 切换单个类名
$('p').toggleClass('my-class');

// 切换多个类名
$('p').toggleClass('class1 class2');

以上三种方法都可以操作、改变元素的 css 样式，具体使用时需要结合实际情况而定。如果需要更新整个网页的样式，可以通过循环所有元素来修改或添加样式。