jQuery CSS类

最新推荐文章于 2024-02-06 14:12:36 发布

书和咖啡

最新推荐文章于 2024-02-06 14:12:36 发布

阅读量229

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/ivenqin/article/details/119522275

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用jQuery进行CSS操作，包括addClass()添加类、removeClass()移除类、toggleClass()切换类和css()设置样式。通过实例演示了如何动态控制元素样式，提升用户体验。

摘要由CSDN通过智能技术生成

本节我们学习如何通过 jQuery 对 CSS 元素进行操作。

jQuery 有以下四种操作 CSS 的方法：

方法	描述
addClass()	向指定元素中添加一个或多个 CSS 类
removeClass()	从指定元素中删除一个或多个 CSS 类
toggleClass()	对指定元素进行添加或删除 CSS 类的切换操作
css()	设置或返回样式属性

addClass()方法

addClass() 方法用于向指定元素添加一个或多个 CSS 类，我们在添加类时，可以选择多个元素。

如果要添加多个 CSS 类到指定元素，可以使用空格分隔类名。注意该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。

示例：

例如我们实现点击按钮，改变文本的字体大小和颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").addClass("con");
    });
  });
</script>
<style>
  .con{
    color: indianred;
    font-size: 24px;
  }
</style>
</head>
<body>
  <p>你好，欢迎来到侠课岛！</p>
  <button>添加CSS类</button>
</body>
</html>

在浏览器中的演示效果：

removeClass()方法

removeClass() 方法刚好和 addClass() 方法相反，addClass() 是原先没有样式，我们需要给它添加样式。而 removeClass() 是在原有的样式基础上移除 CSS 样式。

示例：

例如将上述示例稍做修改：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").removeClass("con");
    });
  });
</script>
<style>
  .con{
    color: indianred;
    font-size: 24px;
  }
</style>
</head>
<body>
  <p class="con">你好，欢迎来到侠课岛！</p>
  <button>移除CSS类</button>
</body>
</html>

在浏览器中的演示效果：

toggleClass()方法

toggleClass() 方法用于对指定元素进行添加或删除 CSS 类的切换操作，其实就相当于在 addClass() 和removeClass() 两个方法之间进行切换。

示例：

在添加 con 样式和移除 con 样式之间切换：

$(function(){
    $("button").click(function(){
      $("p").toggleClass("con");
    });
});

在浏览器中的演示效果：

css()方法

css() 方法为指定元素设置或返回一个或多个样式或属性。

语法如下：

css("propertyname","value");

示例：

返回指定元素的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var c = $("p").css("color");
      alert(c);
    });
  });
</script>
</head>
<body>
  <p style="color:indianred;">你好，欢迎来到侠课岛！</p>
  <button>获取CSS样式</button>
</body>
</html>

在浏览器中的演示效果：

如果需要给指定的元素设置 CSS 属性，我们可以像下面这样做：

$(function(){
    $("button").click(function(){
      $("p").css("color", "indianred");
    });
});

在上述代码中， css() 方法内 color 为 CSS 样式属性，而 indianred 为样式属性值。

我们也可以给指定元素同时设置多个 CSS 属性，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").css({"color":"white", "background-color":"indianred"});
    });
  });
</script>
</head>
<body>
  <p>你好，欢迎来到侠课岛！</p>
  <button>设置多个CSS属性</button>
</body>
</html>

将要设置的 CSS 属性放入一个花括号 {} 中，然后属性和属性值使用冒号 : 分隔，属性与属性之间使用逗号分隔。

在浏览器中的演示效果：

书和咖啡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery CSS类

本节我们学习如何通过 jQuery 对 CSS 元素进行操作。jQuery 有以下四种操作 CSS 的方法：方法描述addClass()向指定元素中添加一个或多个 CSS 类removeClass()从指定元素中删除一个或多个 CSS 类toggleClass()对指定元素进行添加或删除 CSS 类的切换操作css()设置或返回样式属性addClass()方法addClass() 方法用于向指定元素添加一个或多个 CSS 类，我们在添加类时，可以选择
复制链接

扫一扫

专栏目录