jQuery實現的為元素新增或者刪除class樣式類
本章節介紹一下如何利用jQuery為指定的元素新增或者刪除樣式類,以改變元素的樣式屬性。
下面就通過程式碼例項做一下演示介紹。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box{ width:200px; height:50px; background:red; } .hide{display:none} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("#bt").click(function(){ $("#box").toggleClass("hide"); }) }) </script> </head> <body> <div id="box"></div> <input type="button" id="bt" value="隱藏元素"/> </body> </html>
上面的程式碼實現了新增和刪除指定class樣式的功能。
當然方法不止上面這一種,下面再介紹一種比較常用的方式,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box{ width:200px; height:50px; background:red; } .hide{display:none} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("#bt").click(function(){ if($("#box").hasClass("hide")){ $("#box").removeClass("hide"); } else{ $("#box").addClass("hide"); } }) }) </script> </head> <body> <div id="box"></div> <input type="button" id="bt" value="隱藏元素"/> </body> </html>
上面的程式碼實現了隱藏和切換的效果,根據是否具有指定的class類來進行刪除和新增操作。
相關閱讀:
1.hasClass()方法可以參閱jQuery hasClass()一章節。
2.removeClass()方法可以參閱jQuery removeClass()一章節。
3.addClass()方法可以參閱jQuery addClass()一章節。
相關文章
- jquery為指定的元素新增或者刪除指定樣式類jQuery
- jQuery新增或者刪除class樣式類程式碼例項jQuery
- jQuery為元素新增和刪除classjQuery
- javascript實現為指定元素新增class樣式類JavaScript
- 刪除元素的指定的class樣式類
- jquery實現的class樣式類的新增和刪除切換程式碼例項jQuery
- 使用jquery為指定元素新增樣式類jQuery
- jQuery實現的表格新增或者刪除行操作jQuery
- javascript刪除class樣式類JavaScript
- jQuery 新增和刪除classjQuery
- jQuery新增和刪除元素class屬性例項程式碼jQuery
- JavaScript 陣列新增或者刪除元素JavaScript陣列
- jQuery判斷元素是否具有指定的class樣式類jQuery
- jquery實現的操作class樣式類簡單介紹jQuery
- JavaScript動態新增或者刪除HTML元素JavaScriptHTML
- jQuery如何新增和刪除元素jQuery
- jQuery如何判斷指定元素是否具有指定的class樣式類jQuery
- javascript如何刪除一個單獨的class樣式類JavaScript
- jQuery查詢帶有class樣式的元素jQuery
- jQuery實現的具有淡出效果的元素刪除jQuery
- jquery給元素新增樣式表的方法jQuery
- JavaScript新增class樣式類程式碼JavaScript
- 動態的新增或者刪除指定元素程式碼例項
- jQuery刪除元素jQuery
- jQuery 刪除元素jQuery
- class屬性的新增刪除
- jquery select下拉選單新增或者刪除option項jQuery
- js實現在陣列的在陣列的開頭和結尾新增或者刪除元素JS陣列
- JS實現頁面跳轉或者重新整理後保留點選新增的class樣式JS
- jQuery動態新增或刪除<input type="file">元素jQuery
- jQuery實現的刪除指定子元素程式碼例項jQuery
- jquery新增或者刪除select下拉選單項程式碼jQuery
- jQuery刪除指定子元素jQuery
- jQuery刪除指定li元素jQuery
- jquery table 的新增和刪除jQuery
- JavaScript如何判斷指定元素是否具有class樣式類JavaScript
- jquery實現增加刪除行jQuery
- jQuery如何刪除元素節點jQuery