• jQuery 视频教程

jQuery - CSS 属性

jQuery 提供了css()方法来操作匹配元素的 CSS 属性。

JQuery css()方法不会修改 jQuery 对象的内容，但它们用于获取和设置 DOM 元素上的 CSS 属性。

jQuery - 获取 CSS 属性

jQuery css()方法可用于获取与第一个匹配的 HTML 元素关联的 CSS 属性的值。以下是css()方法的语法：

$(selector).css(propertyName);

jQuery 可以理解并返回css( "background-color" )和css( "backgroundColor" )的正确值。

例子

让我们尝试下面的示例并验证结果。这应该返回第一个匹配的 <div> 的背景颜色。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         alert("Background color = " + $("div").css("background-color"));
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Get CSS Property</button>
</body>
</html>

jQuery - 设置 CSS 属性

jQuery css()方法可用于设置与匹配的 HTML 元素关联的一个或多个 CSS 属性的值。以下是css()方法的语法：

$(selector).css(propertyName, value);

这里两个参数都是必需的，propertyName表示 CSS 属性名称，其中value表示属性的有效值。

例子

让我们尝试下面的示例并验证结果。在这里，我们将采用第一个匹配的 <div> 的颜色，并使用 div 背景颜色更改所有 <p> 的文本颜色。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         var color = $("div").css("background-color");
         $("p").css("color", color);
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Set CSS Property</button>
</body>
</html>

jQuery - 设置多个 CSS 属性

您可以使用单个 jQuery 方法css()在匹配的元素上应用多个 CSS 属性。您可以在一次调用中应用任意数量的属性。

以下是设置多个 CSS 属性的css()方法的语法：

$(selector).css({propertyName1:value1, propertyName2:value2,...});

例子

让我们尝试下面的示例并验证结果。这里我们将所有 <div> 的背景颜色设置为“#fb7c7c;” 并将字体大小设置为 25px。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("div").css({"background-color":"#fb7c7c", "font-size": "25px"});
      });
   });
</script>
<style>
   button{margin:10px;width:150px;cursor:pointer}
   div{ margin:10px;padding:12px; width:125px;}
</style>
</head>
<body>
   <p>Click the below button to see the result:</p>

   <div style="background-color:#9c9cff;">Blue</div>
   <div style="background-color:#93ff93;">Green</div>

   <button>Set CSS Property</button>
</body>
</html>

jQuery HTML/CSS 参考

您可以在以下页面获取操作 CSS 和 HTML 内容的所有 jQuery 方法的完整参考：jQuery HTML/CSS 参考。