jQuery操作样式

最新推荐文章于 2024-10-15 16:54:43 发布

原创最新推荐文章于 2024-10-15 16:54:43 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #javascript

JavaScript&JQuery&Ajax 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了如何使用jQuery进行CSS操作，包括设置和获取样式，以及添加、移除、切换和检查类样式的方法。示例代码展示了如何改变元素的颜色、大小、背景和边框，并演示了如何一次性设置多个样式。此外，还讲解了如何添加和删除类，以及如何判断元素是否包含特定类样式。

1、css操作

1.1 利用css(name,value)设置样式

设置单个样式

/**
 * 设置样式
 * name：样式名
 * value：样式值
 */
$("li").css("fontSize", "32px");
$("li").css("color", "yellow");
$("li").css("backgroundColor", "pink");
$("li").css("border", "1px solid red");

一次设置多个样式

/**
 * 一次设置多个样式
 * 传递样式对象
 */
$("li").css({
  fontSize: "32px",
  color: "cyan",
  backgroundColor: "green",
  border: "1px solid pink"
});

1.1 利用css(name)获取样式

/**
 * 获取样式
 * name：样式名
 * 注意：获取样式，如果是多个元素，只会返回第一个元素对应的样式值！
 */
console.log($("li").css("color"));
console.log($("li").css("fontSize"));

2、类样式操作

2.1 添加

$("li").addClass("basic");

2.2 移除

$("li").removeClass("bigger");

2.3 切换类

// function toggleClass( value, stateVal )
$("li").toggleClass("bigger", "smaller");

2.4 判断是否包含某个类样式

console.log($("li").hasClass("bigger"));