JQuery：JQuery 中的CSS()方法

最後更新：2016-09-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：

JQuery:CSS()方法
jQuery css()方法：css()方法設定或返回被選元素的一個或多個樣式屬性。
1、返回 CSS 屬性
如需返回指定的 CSS 屬性的值，請使用如下文法：
css("propertyname");
下面的例子將返回首個匹配元素的 background-color 值：
執行個體：$("p").css("background-color");
代碼如下：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>JQuery的使用！！！</title>    <script src="jquery-3.1.0.js"></script>    <script>        $(document).ready(function(){            //返回p元素的background-color            $("button").click(function(){                alert("p元素的背景色是："+ $("p").css("background-color"));            });        });    </script></head><body>    <h2>這是一個標題</h2>    <p style="background-color:#ff0000">這是一個段落。</p>    <p style="background-color:#00ff00">這是一個段落。</p>    <p style="background-color:#0000ff">這是一個段落。</p>    <button>返回p元素的background-color</button></body></html>

2、設定 CSS 屬性
如需設定指定的 CSS 屬性，請使用如下文法：
css("propertyname","value");
下面的例子將為所有匹配元素設定 background-color 值：
執行個體：$("h2").css("background-color","yellow");
代碼如下：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>JQuery的使用！！！</title>    <script src="jquery-3.1.0.js"></script>    <script>        $(document).ready(function(){            //設定h2元素的background-color            $("button").click(function(){                $("h2").css("background-color","yellow");            });        });    </script></head><body>    <h2>這是一個標題</h2>    <p style="background-color:#ff0000">這是一個段落。</p>    <p style="background-color:#00ff00">這是一個段落。</p>    <p style="background-color:#0000ff">這是一個段落。</p>    <button>設定h2元素的background-color</button></body></html>

3、設定多個 CSS 屬性
如需設定多個 CSS 屬性，請使用如下文法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子將為所有匹配元素設定 background-color 和 font-size：
執行個體：$("h2").css({"background-color":"yellow","font-size":"200%"});

代碼如下：

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="utf-8">    <title>JQuery的使用！！！</title>    <script src="jquery-3.1.0.js"></script>    <script>        $(document).ready(function(){            //設定h2元素的多個css屬性            $("button").click(function(){                $("h2").css({"background-color":"yellow","font-size":"50%"});            });        });    </script></head><body>    <h2>這是一個標題</h2>    <p style="background-color:#ff0000">這是一個段落。</p>    <p style="background-color:#00ff00">這是一個段落。</p>    <p style="background-color:#0000ff">這是一個段落。</p>    <button>設定h2元素的多個css屬性</button></body></html>

JQuery：JQuery 中的CSS()方法

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JQuery：JQuery 中的CSS()方法

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support