jQuery 獲取和設定 CSS 屬性

Created: October-14, 2018

在本教程中，您將學習如何使用 jQuery 獲取或設定樣式屬性。

jQuery `css()` 方法

jQuery css() 方法用於獲取 CSS 屬性的計算值或為所選元素設定一個或多個 CSS 屬性。

此方法提供了一種將樣式直接應用於 HTML 元素（即內聯樣式）的快速方法，這些元素在樣式表中尚未定義或無法輕鬆定義。

獲取 CSS 屬性值

只需將屬性名稱作為引數傳遞給 css() 方法，即可獲得元素 CSS 屬性的計算值。這是基本語法：

$(selector).css("propertyName");

以下示例將在單擊時檢索並顯示 <div> 元素的 CSS 屬性 background-color 的計算值。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
        display: inline-block;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("div").click(function(){
        var color = $(this).css("background-color");
        $("#result").html(color);
    });    
});
</script>
</head>
<body>
    <div style="background-color:orange;"></div>
    <div style="background-color:#ee82ee;"></div>
    <div style="background-color:rgb(139,205,50);"></div>
    <div style="background-color:#f00;"></div>
    <p>The computed background-color property value of this DIV element is: <b id="result"></b></p>
</body>
</html>

設定單個 CSS 屬性和值

css() 方法可以將屬性名稱和值作為單獨的引數，以便為元素設定單個 CSS 屬性。基本語法如下，

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

以下示例在單擊時，將 <div> 元素的 CSS background-color 屬性設定為顏色值 red。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
        border: 1px solid #cdcdcd;
        display: inline-block;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".box").click(function(){
        $(this).css("background-color", "red");
    });    
});
</script>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

設定多個 CSS 屬性和值

您還可以使用 css() 方法設定多個 CSS 屬性。設定元素的多個屬性的基本語法可以通過以下方式給出：

$(selector).css({"propertyName":"value", "propertyName":"value", ...});

以下示例將同時設定所選元素的 CSS 屬性 background-color 以及 padding 屬性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style type="text/css">
    p{
        font-size: 18px;
        font-family: Arial, sans-serif;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({"background-color": "yellow", "padding": "20px"});
    });    
});
</script>
</head>
<body>
    <h1>This is a heading</h1>
    <p style="background-color:orange;">This a paragraph.</p>
    <p style="background-color:#ee82ee;">This is another paragraph.</p>
    <p style="background-color:rgb(139,205,50);">This is none more paragraph.</p>
    <p>This is one last paragraph.</p>
    <button type="button">Add CSS Styles</button>
</body>
</html>

jQuery css() 方法

獲取 CSS 屬性值

設定單個 CSS 屬性和值

設定多個 CSS 屬性和值

jQuery `css()` 方法