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://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> 的颜色，并将所有 <p> 的文本颜色更改为 div 的背景颜色。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://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://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 参考。

打印页面