当前位置：首页 > jquery

jquery改变css

2026-04-08 11:14:18jquery

jQuery 修改 CSS 的方法

jQuery 提供了多种方式来动态修改元素的 CSS 样式。以下是几种常用的方法：

1. 使用 .css() 方法直接修改样式

// 修改单个样式属性
$("selector").css("property", "value");

// 修改多个样式属性
$("selector").css({
  "property1": "value1",
  "property2": "value2"
});

2. 使用 .addClass() 和 .removeClass() 方法

jquery改变css

// 添加 CSS 类
$("selector").addClass("className");

// 移除 CSS 类
$("selector").removeClass("className");

// 切换 CSS 类（存在则移除，不存在则添加）
$("selector").toggleClass("className");

3. 使用 .attr() 方法修改 style 属性

// 直接修改元素的 style 属性
$("selector").attr("style", "property: value;");

4. 获取当前样式值

jquery改变css

// 获取特定 CSS 属性的值
var value = $("selector").css("property");

实际应用示例

修改单个元素的背景色和字体大小

$("#myElement").css({
  "background-color": "red",
  "font-size": "20px"
});

为按钮添加悬停效果

$("button").hover(
  function() {
    $(this).css("background-color", "blue");
  },
  function() {
    $(this).css("background-color", "");
  }
);

响应式调整元素宽度

$(window).resize(function() {
  $(".responsive-box").css("width", $(window).width() / 2);
});

注意事项

使用 .css() 方法设置样式时，属性名可以使用 CSS 原生命名（如 background-color）或 camelCase 格式（如 backgroundColor）。
直接修改 style 属性的优先级高于外部样式表，可能会影响其他样式规则。
对于复杂的样式修改，推荐使用 CSS 类切换的方式，而不是直接操作样式属性。