在工作中,經常需要使用Javascript來改變頁面元素的樣式。其中一個方法是改變頁面元素的CSS類別(Class),這在傳統的Javascript裡,我們通常是透過處理HTML Dom的classname特性來實現的;而jQuery提供三種方法來實現這個功能,雖然它們和傳統方法的想法相通,但是卻節省了許多程式碼。還是那句話- “jQuery讓JavaScript程式碼變得簡潔!”
1. addClass() - 新增CSS類別
$("#target"). addClass("newClass");
//#target 指的是需要加入樣式的元素的ID
//newClass 指的是CSS類別的名稱
2. removeClass( ) - 移除CSS類別
$("#target").removeClass("oldClass");
//#target 指的是需要移除CSS類別的元素的ID
//oldClass 指的是CSS類別的名稱
3. toggleClass() - 新增或移除CSS類別
##如果CSS類別已經存在,它將被移除;相反,如果CSS類不存在,它將被加上。 $("#target").toggleClass("newClass")//如果ID為「target」的元素已經定義了CSS樣式,它將被移除;
//反之,CSS類別」newClass「將被賦給該ID。
常見問題:
<label for="TrueName" generated="true" class="msg-error" style="">正确</label>透過addClass("msg-success");
<label for="TrueName" generated="true" class="msg-error msg-success" style="">正确</label>
CSS文件 误:(msg-success将被msg-error覆盖,样式不变) span.msg-error, label.msg-error{color: #f00;} span.msg-success, label.msg-success{color: #000;} 正: span.msg-error, label.msg-error{color: #f00;} span.msg-success, label.msg-success{color: #000;}
以上是如何在jQuery中新增或刪除CSS樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!