js移除和新增class樣式類簡單介紹
本章節分享一段程式碼例項,它實現了利用原生javascript刪除或者新增指定樣式類的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <style type="text/css"> #antzone{ width:200px; height:100px; background:#ccc; text-align:center; line-height:100px; } .color{ color:red; } </style> <script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } } window.onload=function(){ var oAdd=document.getElementById("add"); var oDel=document.getElementById("del"); var odiv=document.getElementById("antzone"); oAdd.onclick=function(){ addClass(odiv,"color"); } oDel.onclick=function(){ removeClass(odiv,"color"); } } </script> <body> <div id="antzone">螞蟻部落</div> <input type="button" id="add" value="新增"/> <input type="button" id="del" value="刪除"/> </body> </html>
上面的程式碼實現了新增和刪除功能,更多內容可以參閱相關閱讀。
相關閱讀:
(1).className可以參閱js className一章節。
(2).match()可以參閱正規表示式match()函式一章節。
(3).replace()可以參閱正規表示式replace()函式一章節。
相關文章
- jquery實現的操作class樣式類簡單介紹jQuery
- js獲取元素的樣式值簡單介紹JS
- JavaScript新增class樣式類程式碼JavaScript
- CSS的內聯樣式和外鏈樣式簡單介紹CSS
- js isPrototypeOf()函式用法簡單介紹JS函式
- 簡單介紹JS函式防抖和函式節流JS函式
- TypeScript class 類介紹TypeScript
- js isNaN函式的用法簡單介紹JSNaN函式
- js eval()函式的用法簡單介紹JS函式
- js Date()建構函式簡單介紹JS函式
- js fromCharCode()函式用法簡單介紹JS函式
- js 函式作用域鏈簡單介紹JS函式
- javascript實現為指定元素新增class樣式類JavaScript
- JSON簡單介紹JSON
- nodejs簡單介紹NodeJS
- AngularJS 樣式指南介紹AngularJS
- 函式表示式和函式宣告簡單介紹函式
- js中匿名函式的使用簡單介紹JS函式
- js函式的length屬性簡單介紹JS函式
- javascript類式繼承設計模式簡單介紹JavaScript繼承設計模式
- JSON物件簡單介紹JSON物件
- js WebSocket用法簡單介紹JSWeb
- jQuery新增或者刪除class樣式類程式碼例項jQuery
- jquery css()方法設定元素的樣式簡單介紹jQueryCSS
- 動態設定元素的css樣式簡單介紹CSS
- javascript動態改變元素css樣式簡單介紹JavaScriptCSS
- js類陣列物件(array-like objects)簡單介紹JS陣列物件Object
- js函式引數值傳遞和引用傳遞簡單介紹JS函式
- js字串連線簡單介紹JS字串
- js cookie路徑簡單介紹JSCookie
- js 特權方法簡單介紹JS
- js短路運算簡單介紹JS
- js與&&運算子簡單介紹JS
- jQuery實現的為元素新增或者刪除class樣式類jQuery
- javascript刪除class樣式類JavaScript
- javascript鏈式呼叫簡單介紹JavaScript
- javascript匿名函式簡單介紹JavaScript函式
- C/C++語言新增“函式過載”功能簡單介紹和使用方法C++函式