JQ和CSS是前端開發時經常用到的兩個工具,通過它們可以讓網頁的樣式更加美觀,頁面的交互更加友好。在JQ中,我們可以方便地設置多個CSS樣式,讓網頁的效果更加豐富。
要設置多個CSS樣式,我們可以使用JQ的css()方法。下面是一個例子:
$(selector).css({ "property1": "value1", "property2": "value2", "property3": "value3" });
在上面的代碼中,selector表示要設置樣式的元素,property1、property2、property3分別表示CSS屬性,value1、value2、value3分別表示CSS屬性的值。
比如,我們想讓一個元素的文字顏色為紅色,背景顏色為黃色,字體大小為16px,可以這樣設置:
$("p").css({ "color": "red", "background-color": "yellow", "font-size": "16px" });
在上面的代碼中,我們選中了所有的p標簽,同時設置了三個CSS樣式:文字顏色、背景顏色、字體大小。
除了可以設置多個CSS樣式外,JQ的css()方法還可以同時獲取一個或多個CSS樣式。我們可以這樣寫:
$(selector).css("property"); $(selector).css(["property1", "property2",...]);
第一種寫法可以獲取單個CSS樣式,第二種寫法可以獲取多個CSS樣式。比如,我們想獲取一個元素的文字顏色,可以這樣寫:
var color = $("p").css("color");
我們還可以通過JQ的addClass()方法和removeClass()方法來進行樣式的添加和刪除。比如,我們想讓一個元素添加一個叫做highlight的樣式,可以這樣寫:
$("p").addClass("highlight");
同樣地,我們想讓一個元素刪除highlight樣式,可以這樣寫:
$("p").removeClass("highlight");
JQ的css()方法、addClass()方法和removeClass()方法,可以方便地實現網頁樣式的設置、添加和刪除,是前端開發中不可缺少的工具。
上一篇css多層書寫
下一篇jq 判斷css的值