JavaScript新增class樣式類程式碼
分享一段程式碼例項,它實現了為指定元素新增class樣式類功能。
使用className屬性即可實現,關於此屬性的用法可以參閱js className屬性詳解一章節。
先看一段程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> div{ width:200px; height:100px; background:#ccc; } .antzone{ line-height:100px; text-align:center; color:red; } </style> <script> window.onload=function(){ var odiv=document.getElementsByTagName("div")[0]; var obt=document.getElementById("bt"); obt.onclick=function(){ odiv.className="antzone"; } } </script> </head> <body> <div>螞蟻部落</div> <input type="button" id="bt" value="檢視演示"/> </body> </html>
程式碼如果原本div元素就有class樣式類,這樣設定的話,就會將原來的覆蓋,程式碼修改如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> div{ width:200px; height:100px; background:#ccc; } .antzone{ line-height:100px; text-align:center; color:red; } .a{ border:2px solid blue; } </style> <script> window.onload=function(){ var odiv=document.getElementsByTagName("div")[0]; var obt=document.getElementById("bt"); obt.onclick=function(){ var cls=odiv.className; odiv.className=cls+" antzone"; } } </script> </head> <body> <div class="a">螞蟻部落</div> <input type="button" id="bt" value="檢視演示"/> </body> </html>
相關文章
- JavaScript class 類JavaScript
- JavaScript:類(class)JavaScript
- JavaScript動態建立div並新增樣式JavaScript
- 繫結class樣式和style樣式
- 程式碼樣式
- JavaScript 程式碼開頭新增分號JavaScript
- 程式碼樣式檢查
- vue-class和style樣式繫結Vue
- JS實現頁面跳轉或者重新整理後保留點選新增的class樣式JS
- [Javascript] Class & PrototypesJavaScript
- jQuery查詢帶有class樣式的元素jQuery
- 007 Class(類)
- 【JavaScript】DOM之樣式操作JavaScript
- font-class引入css樣式,引入字型圖示CSS
- JavaScript class 繼承JavaScript繼承
- EventEmitter:從命令式 JavaScript class 到宣告函式式的華麗轉身MITJavaScript函式
- umi4 在index.html中新增指令碼和樣式IndexHTML指令碼
- vue 元件中新增樣式不生效Vue元件
- [譯] 給破碎圖片新增樣式
- javascript 動態修改css樣式JavaScriptCSS
- tab-switch 樣式的新增 與 tab元素樣式的切換
- jQuery 新增和刪除classjQuery
- 怎樣使你的 JavaScript 程式碼簡單易讀JavaScript
- React — Class類元件React元件
- TypeScript class類相容TypeScript
- 瀏覽器預設樣式程式碼收集瀏覽器
- Obsidian自定義程式碼塊樣式成Typora
- 前端-JavaScript中的class前端JavaScript
- vxe-table呼叫refreshColumn重新整理列後vxe-column插槽下的元素新增的class樣式丟失
- shopify 屬性新增圖片及樣式
- ABAP 程式語言中 Class(類)的設計原理剖析
- CSS中多個class樣式設定的不同寫法CSS
- JavaScript動態更改引入樣式表JavaScript
- class屬性的新增刪除
- java反射之Class類Java反射
- 類定義(class definition)
- Class:向傳統類模式轉變的建構函式模式函式
- pdf程式碼新增水印