javascript實現為指定元素新增class樣式類
有時候為了改變元素的外觀,可能需要動態的為元素新增一個class樣式類。
下面就通過程式碼例項介紹一下如何實現此功能,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE HTML> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .antzone { width:200px; height:100px; background:#ccc; text-align:center; line-height:100px; } .softwhy { 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; } } window.onload = function () { var odiv = document.getElementById("ant"); var obt = document.getElementById("bt"); obt.onclick = function () { addClass(odiv, "softwhy"); } } </script> </head> <body> <div id="ant" class="antzone">螞蟻部落</div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
相關文章
- jQuery實現的為元素新增或者刪除class樣式類jQuery
- 使用jquery為指定元素新增樣式類jQuery
- JavaScript如何判斷指定元素是否具有class樣式類JavaScript
- jquery為指定的元素新增或者刪除指定樣式類jQuery
- 刪除元素的指定的class樣式類
- JavaScript新增class樣式類程式碼JavaScript
- jQuery如何判斷指定元素是否具有指定的class樣式類jQuery
- jQuery判斷元素是否具有指定的class樣式類jQuery
- javascript判斷元素是否具有指定樣式類JavaScript
- javascript刪除class樣式類JavaScript
- 如何判斷元素具有指定的樣式類
- jquery實現的class樣式類的新增和刪除切換程式碼例項jQuery
- js移除和新增class樣式類簡單介紹JS
- jQuery為元素新增和刪除classjQuery
- jquery實現的操作class樣式類簡單介紹jQuery
- jQuery新增或者刪除class樣式類程式碼例項jQuery
- javascript如何獲取具有指定class屬性的元素物件JavaScript物件
- javascript如何刪除一個單獨的class樣式類JavaScript
- 使用樣式類為某一型別的元素設定樣式型別
- jQuery查詢帶有class樣式的元素jQuery
- JavaScript class 類JavaScript
- JavaScript:類(class)JavaScript
- CSS 設定指定範圍li元素樣式CSS
- CSS匹配指定li元素並設定樣式CSS
- js如何動態為指定的元素新增內容JS
- jquery給元素新增樣式表的方法jQuery
- 原生javascript實現獲取指定元素下所有後代元素程式碼例項JavaScript
- javascript如何修改元素的樣式JavaScript
- javascript控制html裡的元素樣式JavaScriptHTML
- 利用jQuery在指定元素中新增html元素jQueryHTML
- JS實現頁面跳轉或者重新整理後保留點選新增的class樣式JS
- jquery實現的獲取指定元素指定型別元素數目jQuery型別
- JavaScript在指定元素後面插入元素JavaScript
- tab-switch 樣式的新增 與 tab元素樣式的切換
- JavaScript獲取指定元素的同輩元素JavaScript
- 利用jquery實現的向指定元素追加指定內容jQuery
- JavaScript動態建立div並新增樣式JavaScript
- javascript使用style方式設定元素的樣式JavaScript