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>