jquery修改css

jQuery 修改 CSS 的方法

使用 jQuery 修改元素的 CSS 样式有多种方式，以下是常见的几种方法：

直接修改样式属性

通过 .css() 方法可以直接修改元素的 CSS 属性。该方法接受属性名和值作为参数，可以单独修改一个属性，也可以批量修改多个属性。

// 修改单个属性
$('#element').css('color', 'red');

// 修改多个属性
$('#element').css({
  'color': 'blue',
  'font-size': '20px',
  'background-color': '#f0f0f0'
});

添加或移除 CSS 类

通过 .addClass()、.removeClass() 和 .toggleClass() 方法可以动态添加、移除或切换 CSS 类，从而间接修改样式。

// 添加类
$('#element').addClass('highlight');

// 移除类
$('#element').removeClass('inactive');

// 切换类
$('#element').toggleClass('active');

获取样式属性值

通过 .css() 方法还可以获取元素的当前样式属性值。

var color = $('#element').css('color');
console.log(color); // 输出当前颜色值

注意事项

• 使用 .css() 方法时，属性名可以使用驼峰式（如 backgroundColor）或短横线式（如 background-color）。
• 修改多个属性时，建议传递一个对象以提高代码可读性。
• 通过类名修改样式更符合关注点分离原则，推荐优先使用 .addClass() 等方法。