领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

jQuery CSS类（jquery获取单选框选中的值）

nixiaole 2024-11-15 23:01:11 知识剖析 16 ℃

本节我们学习如何通过 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 属性放入一个花括号 {} 中，然后属性和属性值使用冒号 : 分隔，属性与属性之间使用逗号分隔。

在浏览器中的演示效果：

Tags：

猜你喜欢

最近发表
标签列表