jQuery .css 是 jQuery 中一個用于操作 CSS 的方法。通過這個方法,我們可以方便地獲取、設置 HTML 元素的樣式,從而實現頁面樣式的動態修改。
這個方法接受一個 CSS 屬性名稱和可選的一個值作為參數,如果只有一個參數,那么它將返回該屬性的值,如果有兩個參數,那么它將設置該屬性的值。
// 獲取元素寬度 var width = $("div").css("width"); console.log(width); // 200px // 設置元素背景色 $("div").css("backgroundColor", "#ccc");
在代碼中,我們首先使用 jQuery 選擇器選中一個 div 元素,然后調用 .css 方法獲取該元素的寬度,并將結果保存在變量 width 中。接下來,我們使用 .css 方法將該元素的背景色設置為 #ccc。
除了上述最基本的用法,jQuery .css 方法還有一些高級的用法。例如,可以通過 .css 方法同時設置多個 CSS 屬性:
// 同時設置寬度和高度 $("div").css({ width: "200px", height: "100px" });
在代碼中,我們通過傳遞一個包含屬性和值的對象參數,同時設置了 div 元素的寬度和高度為 200px 和 100px。
此外,.css 方法還支持回調函數作為第二個參數,用于動態地設置 CSS 屬性的值:
// 動態設置寬度 $("div").css("width", function(index, value){ return parseInt(value) * 2 + "px"; });
在代碼中,我們通過將一個匿名函數作為 .css 方法的第二個參數,對 div 元素的寬度進行了動態計算。該函數接受兩個參數:index 表示當前元素在所有匹配的元素中的索引,value 表示該元素當前的寬度值。我們在該函數內部將當前的寬度值乘以 2,并添加 px 單位后返回,最終實現了動態設置寬度的效果。
綜上所述,jQuery .css 方法是 jQuery 中一個非常常用的方法,能夠方便地操作和修改元素的 CSS 樣式,為頁面的樣式定制提供了廣泛的支持。
上一篇css多個a換行排列
下一篇css多個div一起動畫