js style.cssText用法簡單介紹
使用js動態設定元素的樣式的時候通常使用domObj.style方式,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("thediv"); odiv.style.width="100px"; odiv.style.height="100px"; odiv.style.backgroundColor="green"; } </script> </head> <body> <div id="thediv"></div> </body> </html>
如果要設定的屬性過多的話,可能會導致程式碼是否冗雜,而cssText能夠讓我們把樣式程式碼寫在一起,而不必要每一個樣式屬性用一行程式碼設定,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("thediv"); var styleStr="width:100px;height:100px;background-color:green"; odiv.style.cssText=styleStr; } </script> </head> <body> <div id="thediv"></div> </body> </html>
以上程式碼實現了我們的要求,就是能夠將樣式程式碼寫在一起。
相關文章
- js迴圈中reduce的用法簡單介紹JS
- 簡單介紹SQLserver中的declare變數用法SQLServer變數
- 簡單介紹Python中異常處理用法Python
- 簡單介紹js 陣列 fill() 填充方法JS陣列
- RPC簡單介紹RPC
- Python簡單介紹Python
- KVM簡單介紹
- RMI簡單介紹
- HTML簡單介紹HTML
- HTML 簡單介紹HTML
- JavaScript 簡單介紹JavaScript
- CSS 簡單介紹CSS
- ajax簡單介紹
- SVG簡單介紹SVG
- Clickjacking簡單介紹
- 【Pandas】簡單介紹
- Map簡單介紹
- JSON簡單介紹JSON
- ActiveMQ簡單介紹MQ
- 簡單介紹Vue中使用js-cookie詳情VueJSCookie
- Git_簡單介紹Git
- jQuery Validate簡單介紹jQuery
- JSON物件簡單介紹JSON物件
- <svg>元素簡單介紹SVG
- 簡單介紹 ldd 命令
- 禪道簡單介紹
- Webpack 的簡單介紹Web
- Apache Curator簡單介紹Apache
- spark簡單介紹(一)Spark
- Flutter key簡單介紹Flutter
- 簡單介紹克隆 JavaScriptJavaScript
- AOP的簡單介紹
- Ansible(1)- 簡單介紹
- Flownet 介紹 及光流的簡單介紹
- form表單的簡單介紹ORM
- 簡單介紹JS函式防抖和函式節流JS函式
- canvas標籤簡單介紹Canvas
- Git發展簡單介紹Git
- mt19937 簡單介紹