dojo/dom-style
簡介
dojo/dom-style 是用來改變節點樣式 (style) 的模組。雖然利用 dojo/dom-attr 和 dojo/dom-prop 也可以改變節點的樣式，但不若使用 dojo/dom-style 來的直覺和方便。
使用 dojo/dom-style 時需注意下列幾點：
- HTML 中的樣式屬性名以連字符號 (hyphen) 分隔單字，在 dojo/dom-sytle 模組中，樣式屬性的名稱的命名則為駝峰式 (CamelCased)。例： font-size 在dojo/dom-style 中要寫成 fontSize，background-color 則要寫成 backgroundColor。
- 所有的顏色屬性，在設定時雖然還是可以使用各種表示式，但在讀取時的傳回值時都會被正規化 (normalized) ，一律以 rgb(r, g, b) 的方式表逹。
- 有些具有組合值的樣式屬性，只會傳回一個字串。例如： border 含有 border-width, border-style, border-color，其中各個又含有 border-top-*, border-left-*, border-right-* 及 border-bottom-* ，使用時，最好明確的分別讀取各值，否則很容易搞混，不方便作業。這時可能就要用到 .getComputedStyle() 取得樣式最終的計算結果來處理。但如果你很清楚自己在做什麼，就另當別論了。
- getComputedStyle(node)
- 這是少數參數只能傳入節點，而不能傳入節點的 id 字串的函式。參數一定先得透過 dom.byId("idString") 取得節點，再當成參數傳入，才能呼叫該函式。函式則會傳回一個包含所有樣式屬性的龐大物件，這個函式會消耗很多資源，要小心使用。
- get(node, name)
- 取得 node 節點中名為 name 樣式屬性的設定值。第一個參數可以傳入節點，或該節點 id 的字串值。
- set(node, name, value)
- 設定節點 node 的 name 樣式屬性為 value 值。第一個參數可以傳入節點，或該節點 id 的字串值。
範例
範例中建立了一個黑框黃底的方塊， 2 秒後改變邊框色為銀色，再過 2 秒改變底色為藍色，再過 2 秒縮小方塊面積成為原面積的 1/4。記得開啟開發者工具，在主控台中觀察 console.log() 的輸出。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
width:1000px;
height:100%;
padding-top:20px;
}
.boxStyle {
width:200px;
height:200px;
border:5px solid black;
background-color: yellow;
}
</style>
樣式表中先以 .boxStyle{} 建立方塊的基本樣式。
HTML
<body class="claro">
</body>
html 裡簡單的建立一對 <div> 標記，使用樣式做成一個方塊。
Script
第 11 行呼叫 dom.byId() 以取得節點物件，因為第 12 行的 domStyle.getComputedStyle() 只能用節點做為參數值。其它各行程式的作用都顯而易見，就不多做解釋了。
沒有留言:
張貼留言