dojo/dom-class
簡介
dojo/dom-class 是另一個可以改變節點樣式的模組。但和 dojo/dom-attr, dojo/dom-prop 及 dojo/dom-style 不同的是：dojo/dom-class 是透過改變節點中 class 屬性值的方式來改變節點的樣式；如果規劃得宜，這種方式顯得更有條理且效率更高，程式也比較易讀及維護。但有一點要特別注意：如果該元件在樣式表中有透過 #id 設定的樣式，則透過 .class 的設定無法改變透過 #id 的設定，必須使用 dojo/dom-style 模組才能改變在 #id 中的設定值。
- contains(node, class)
- 檢查 node 節點中是否含有 class 類別，若有，傳回 true；若無，則傳回 false。class為樣式類別的名稱字串。
- add(node, class)
- 將名為 class 樣式類別加到 node 節點中。class 會被加到 node 節點之樣式類別的最後一個。但如果兩個不同的樣式類別都設定了相同樣式屬性，哪一個樣式類別的設定會被採用，則決定於這兩個樣式類別在樣式表中的先後次序，在樣式表中較後面的樣式類別，具有較高的權限。於如果節點的 class 屬性中己具有要加入的樣式類別，則不會重複加入。參數 class 可以是一個字串值，或一個字串陣列；若傳入值為一字串陣列，會依序將陣列中的字串值逐一加入到節點的 class 屬性值之中。
- remove(node, class)
- 在 node 節點中移除名為 class 的樣式類別。如果該類別不存在，也不會發生錯誤。參數 class 也可以是一個字串陣列，當傳入字串陣列時，陣列串所有的樣式類別都會被移除。
- replace(node, toAdd, toRemove)
- 將 node 節點中的 toRemove 樣式類別替換成 toAdd 樣式類別，其實就是 .remove(toRemove) 加上 .add(toAdd) 的組合。toAdd 和 toRemove 這兩個參數都可以是一個字串陣列。
- toggle(node, class)
- 如果 node 節點中己有名為 class 的樣式類別，則移除；若無，則加入。
範例
範例中建立了一個方塊，每兩秒透過程式改變方塊的樣式設定一次。記得開啟「開發者工具」，觀察 html 原始碼的變化。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
width:1000px;
height:100%;
padding-top:20px;
}
.original {
width:200px;
height:200px;
border:1px solid black;
}
.red {
background-color:red;
border: 5px solid black;
}
.blue {
background-color: blue;
border: 5px solid silver;
}
.big {
width:200px;
height:200px;
}
.small {
width:100px;
height:100px;
}
</style>
樣式表中分別定了五個樣式類別給方塊使用，.original{} 是預設的樣式，.red{} 和 .blue{} 設定方塊的背景和邊框的顏色，.big{} 和 .small{} 則設定方塊的大小。
HTML
<body class="claro">
</body>
html 中用 <div> 建立一個方塊，樣式類別為 .original{}。
Script
程式的部份淺顯易懂，就不多做解釋了。
沒有留言:
張貼留言