当前位置：首页 > jquery

jquery设置css

2026-04-08 05:51:47jquery

jQuery 设置 CSS 的方法

jQuery 提供了多种方法来操作元素的 CSS 样式，以下是常用的几种方式：

使用 `.css()` 方法设置单个属性

语法：$(selector).css(propertyName, value)

示例代码：

$("#elementId").css("color", "red");
$(".className").css("font-size", "16px");

使用 `.css()` 方法设置多个属性

可以通过传递对象来同时设置多个 CSS 属性。

示例代码：

$("#elementId").css({
  "color": "blue",
  "background-color": "yellow",
  "padding": "10px"
});

使用 `.addClass()` 方法添加 CSS 类

语法：$(selector).addClass(className)

示例代码：

$("#elementId").addClass("highlight");

使用 `.removeClass()` 方法移除 CSS 类

语法：$(selector).removeClass(className)

示例代码：

$("#elementId").removeClass("highlight");

使用 `.toggleClass()` 方法切换 CSS 类

语法：$(selector).toggleClass(className)

示例代码：

$("#elementId").toggleClass("highlight");

使用 `.width()` 和 `.height()` 方法设置尺寸

示例代码：

$("#elementId").width(200);
$("#elementId").height(100);

使用 `.css()` 方法获取 CSS 属性值

语法：$(selector).css(propertyName)

示例代码：

jquery设置css

var color = $("#elementId").css("color");
console.log(color);

注意事项

当设置尺寸时，建议使用数字值（单位为像素）或字符串值（包含单位）
对于需要加浏览器前缀的 CSS 属性，jQuery 会自动处理
修改样式时，优先考虑通过添加/移除类的方式，而不是直接修改样式，这样更易于维护

实际应用示例

// 鼠标悬停时改变样式
$(".menu-item").hover(
  function() {
    $(this).css("background-color", "#f0f0f0");
  },
  function() {
    $(this).css("background-color", "");
  }
);

// 点击按钮切换主题
$("#theme-switcher").click(function() {
  $("body").toggleClass("dark-theme");
});

以上方法涵盖了 jQuery 中操作 CSS 的主要方式，可以根据具体需求选择合适的方法。