js dom元素樣式設定相關style屬性介紹
通過js操作元素的css樣式方式有很多中,大家比較熟悉的一種是通過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.color="blue"; odiv.style.fontSize="28px"; } </script> </head> <body> <div id="thediv">螞蟻部落</div> </body> </html>
上面的程式碼可以通過style的方式設定div中的字型顏色為藍色,大小為28px。
當然也可以通過style方式獲取通過style嵌入方式定義的樣式屬性值,相信很多朋友對它的瞭解也就僅限於此,下面再對它做一下進步的簡單介紹,style屬性返回的其實是一個CSSStyleDeclaration物件,此物件包含了所有的元素所具有的css樣式屬性,截圖如下:
這樣看,也許就更能理解style的操作了,更多相關內容可以參閱document.styleSheets與CSSStyleSheet一章節。
相關文章
- js style方式設定元素的樣式JS
- list-style-type屬性用法介紹
- js dom元素事件處理簡單介紹JS事件
- 通過js一次性為元素設定多個樣式屬性JS
- js函式的length屬性簡單介紹JS函式
- <style>標籤的scoped屬性用法簡單介紹
- 表單元素的form屬性介紹ORM
- javascript使用style方式設定元素的樣式JavaScript
- js獲取元素的樣式值簡單介紹JS
- 原生js的常用dom元素操簡單介紹JS
- 表單元素的form屬性用法介紹ORM
- javascript操作html元素屬性簡單介紹JavaScriptHTML
- js的returnValue屬性用法介紹JS
- 行內樣式新增多個style屬性,只會載入第一個style裡面的樣式
- AngularJS 樣式指南介紹AngularJS
- jquery css()方法設定元素的樣式簡單介紹jQueryCSS
- 動態設定元素的css樣式簡單介紹CSS
- 在CSS中對背景圖片進行設定相關屬性CSS
- 元素 offset client scroll 相關屬性簡介client
- JS如何設定元素樣式?JS
- js的屬性物件的specified屬性用法簡單介紹JS物件
- JavaScript style 屬性JavaScript
- HTML style 屬性HTML
- ECharts 樣式設定介紹Echarts
- JavaScript複製dom元素簡單介紹JavaScript
- Rust 屬性介紹Rust
- ClipDrawable屬性介紹
- css屬性與js中style物件的屬性對應表CSSJS物件
- Zepto這樣操作元素屬性
- 18.C++實現Dog類並設定相關屬性和進行相關操作C++
- 使用cssText為元素一次設定多個樣式屬性值CSS
- js style.cssText用法簡單介紹JSCSS
- js 私有方法屬性和公有方法屬性簡單介紹JS
- DOM屬性
- js便籤筆記(2)——DOM元素的特性(Attribute)和屬性(Property)JS筆記
- 原生javascript獲取dom元素簡單介紹JavaScript
- javascript DOM元素節點操作簡單介紹JavaScript
- js設定頁面TR 的屬性 背景顏色 樣式JS