jQuery CSS类

原创
08/24 22:46
阅读数 0

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

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 评论
0 收藏
0
分享
返回顶部
顶部