在使用jQuery的過程中,我們常常需要對某些元素進行樣式的調整,這時候就會用到CSS方法。CSS方法可以讓我們快速的改變元素的樣式,而且可以同時改變多個樣式。
$(selector).css({ property1: value1, property2: value2, ... });
如上代碼所示,我們可以利用CSS方法同時改變多個樣式。其中,selector代表選中的元素,property和value代表要修改的樣式屬性和對應的屬性值。
舉個例子,假設我們有一個類為box的div,我們需要將它的邊框顏色改為紅色,字體改為20px,背景色改為淺灰色。那么我們可以這樣寫:
$(".box").css({ "border-color": "red", "font-size": "20px", "background-color": "lightgrey" });
需要注意的是,我們需要將屬性名用引號括起來,因為有些屬性名中包含有特殊字符,如果不加引號會出現語法錯誤。
CSS方法的另一個常見用法是讀取元素的樣式屬性。可以傳入一個參數表示要獲取哪個屬性。例如:
$(".box").css("background-color"); // 獲取背景色
代碼執行后,會返回當前選中元素的背景色值。
在本例中,我們了解了CSS方法的多樣性,它能夠同時改變多個樣式屬性,甚至還能讀取元素的樣式屬性。