在網頁開發中,我們經常需要修改不止一個 CSS 屬性。如果使用傳統的 JavaScript 方法來實現這一目的,需要寫很多重復的代碼。而jQuery
則提供了一種簡易的方法來更改多個 CSS 屬性。
$(selector).css({ property1:value1, property2:value2, property3:value3 });
上面代碼中$(selector)
是你想修改 CSS 屬性的元素。然后在css()
方法中,我們將需要更改的 CSS 屬性的名稱和它們的相應值以鍵值對的形式列出。這里可以列出任意數量的屬性/值對,不限于上述的三個。
例如,如果你想在單擊按鈕時同時更改多個元素的背景顏色和字體顏色,你可以使用以下代碼:
$("#myButton").click(function(){ $("h1, p, li").css({ "background-color": "yellow", "color":"blue" }); });
這將在單擊按鈕時將<h1>
,<p>
和<li>
的背景顏色更改為黃色,字體顏色更改為藍色。
需要注意的是,在使用多個屬性/值對更改 CSS 時,要用雙引號將屬性名稱括起來,例如:"background-color"
。這是因為這些屬性名稱中有連字符。
通過以上方法,可以輕松更改多個元素的 CSS 屬性,避免繁瑣的重復代碼。利用jQuery
,你可以更加高效那么快速地實現你的開發需求。
上一篇css多余字用省略號
下一篇css多個顏色的方塊