jquery设置css样式

jQuery 设置 CSS 样式的方法

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

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

通过 .css() 方法可以直接设置单个 CSS 属性。语法为：

$("selector").css("property", "value");

示例：

$("#myElement").css("color", "red");

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

可以通过传递对象一次性设置多个 CSS 属性。语法为：

$("selector").css({
    "property1": "value1",
    "property2": "value2"
});

示例：

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

获取 CSS 属性值

.css() 方法也可以用于获取元素的当前样式值。语法为：

var value = $("selector").css("property");

示例：

var fontSize = $("#myElement").css("font-size");
console.log(fontSize); // 输出当前字体大小

使用 .addClass() 和 .removeClass()

通过添加或移除预定义的 CSS 类来间接修改样式：

$("selector").addClass("className"); // 添加类
$("selector").removeClass("className"); // 移除类

示例：

$("#myElement").addClass("highlight");
$("#myElement").removeClass("inactive");

动态切换类名

使用 .toggleClass() 方法在类名之间切换：

$("selector").toggleClass("className");

示例：

$("#toggleButton").click(function() {
    $("#myElement").toggleClass("active");
});

注意事项

• 属性名可以使用 CSS 格式（如 font-size）或 camelCase 格式（如 fontSize）。
• 数值类属性（如 width、height）默认单位为像素（px），但也可以指定其他单位（如 10em）。
• 修改样式后可能触发浏览器重绘，频繁操作可能影响性能。