使用 jQuery 设置元素样式

当我们需要通过 JavaScript 动态地修改页面元素的样式时，可以使用 jQuery 提供的一系列样式操作方法来实现。下面介绍一些常用的样式操作方法。

css() 方法

css() 方法用于获取或设置一个或多个元素的样式属性。

语法

$(selector).css(property)
$(selector).css(property, value)
$(selector).css({property1:value1, property2:value2,...})

• property：要获取或设置的样式属性，可以是字符串或包含一组键值对的对象。
• value：要设置的样式属性值，仅在第二个语法形式中使用。

示例

// 获取 div 元素的颜色属性
var divColor = $("div").css("color");

// 设置 div 元素的颜色和背景颜色属性
$("div").css({ color: "red", backgroundColor: "yellow" });

addClass() 和 removeClass() 方法

addClass() 方法用于给一个或多个元素添加一个或多个类，removeClass() 方法用于从一个或多个元素中删除一个或多个类。

语法

$(selector).addClass(classname)
$(selector).removeClass(classname)

• classname：要添加或删除的类名。

示例

// 添加 class 为 "highlight" 的类到 div 元素中
$("div").addClass("highlight");

// 从 div 元素中删除 class 为 "highlight" 的类
$("div").removeClass("highlight");

toggleClass() 方法

toggleClass() 方法用于在元素中切换一个或多个类。如果元素具有指定的类，则删除它，否则添加它。

语法

$(selector).toggleClass(classname)

• classname：要切换的类名。

示例

// 切换 div 元素中的 class 为 "highlight" 的类
$("div").toggleClass("highlight");

attr() 方法

attr() 方法用于获取或设置一个或多个元素的属性值。

语法

$(selector).attr(attribute)
$(selector).attr(attribute, value)
$(selector).attr({attribute1:value1, attribute2:value2,...})

• attribute：要获取或设置的属性名，可以是字符串或包含一组键值对的对象。
• value：要设置的属性值，仅在第二个语法形式中使用。

示例

// 获取 img 元素的 src 属性值
var src = $("img").attr("src");

// 设置 img 元素的 src 属性值
$("img").attr("src", "new_img.jpg");

以上就是 jQuery 中常用的元素样式操作方法。注意：这些方法都可以通过选择器获取一个或多个元素进行操作。