jQuery是一款優秀的JavaScript庫,可用于簡化JavaScript編程過程。它提供了一個名為css()的函數,可以用于動態設置元素的CSS樣式。這個函數同時也可以獲取元素的CSS樣式。
下面是一些css()函數的用例:
$( "div" ).css( "color", "red" ); // 將所有的div元素的文本顏色設為紅色 $( "p" ).css({ "color": "green", "font-size": "24px" }); // 將所有的p元素的文本顏色設置為綠色,字體大小設為24px var backgroundColor = $( "body" ).css( "background-color" ); // 獲取body元素的背景顏色
如上代碼所示,您可以傳遞一個或多個屬性作為參數來設置元素的CSS樣式。您還可以使用對象字面量來設置多個屬性。要獲取元素的CSS樣式,請使用CSS屬性的名稱(例如:“background-color”)作為css()函數的參數。
除了設置樣式,css()函數還可以使用屬性名和值的對象形式輸入參數。
$( "div" ).css({ "background-color": "red", "font-size": "24px" });
在這個例子中,您可以看到可以使用對象形式一次設置多個屬性的樣式。
最后要注意,css()函數可以針對與所選元素不同的不同狀態設置CSS樣式。
$( "a" ).css( "color", "red" ); // 設置所有未訪問的鏈接的文本顏色為紅色 $( "a:hover" ).css( "color", "blue" ); // 設置所有鼠標懸停的鏈接的文本顏色為藍色
在此示例中,您將看到如何在CSS選擇器中使用偽類選擇器來設置不同狀態下的CSS樣式。