dojo/dom-prop
簡介
dojo/dom-prop 是一個提供函式用來改變節點各屬性的模組。和另一個名為 dojo/dom-attr 的模組功能很相似，但 dojo/dom-attr 很可能在未來退役（根據網路傳言），而完全由 dojo/dom-prop 負責這一部份的功能。之後， dojo 可能就不再區分 attribute 和 property 在定義上的細微差異，一視同仁由 dojo/dom-prop 來處理。
dojo/dom-prop 只提供了二個函式如下：
- get(node, prop):
- 取得並傳回節點 node 在 prop 屬性的設定值。這裡有三個重點要特別注意：
- 當 prop 是 node 在定義中擁有的屬性時，例如 class，但卻沒有設定值時，會傳回空字串 "" ，而非 null。
- 當 prop 並非 node 在定義中已有的屬性時，例如：<p> 標記並不具有 width 及 height 屬性 (attribute)，因此預設不具有這兩個屬性，更不會有設定值，此時會傳回 undefined。透過 dojo/dom-prop 還是可以設定其值，只是沒有作用。透過這個特性，可以用來判定某一屬性是否為某節點所在定義上即擁有的屬性。
- 當 get() 在讀取像 <img> 的基本屬性 width 及 height 值時，只會傳回數值的部份，卻不會傳回設定的單位或是百分比。例如： 50px, 50em 和 50% 都只會傳回 50，這點還滿令人抓狂的。建議使用 dojo 時，在任何地方只要有設定到 width 和 height 時，最好都在樣式表 (style) 中設定，也只用 dojo/dom-style 來操作這些屬性。
"innerHTML": 傳入 "innerHTML" 做為屬性名稱時，會傳回節點內含的 HTML 片段。"textContent": 傳入 "textContent" 做為屬性名稱時，會傳回內含所有的文字部份，像是 <span> 和 <br> 等這些 in-line 的標記都會被拿掉。特別要注意的是 <br> 這個標記並不會用換行或是空白字元來取代，使用時要特別小心。
- set(node, prop, value):
- 將 node 中的 prop 屬性設定為 value 值。即使 prop 不是 node 定義擁有的屬性，還是可以設定，只是沒有作用，在下載的 html 原始碼中也看不到；設定完了之後，用 get() 還可以讀得到值。為什麼要這麼做，我也是百思不得其解。
範例
範例中定義了一個文字段落，然後用程式去改變文字段落的屬性。記得開啟開發者工具，在主控台中觀察結果。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
width:1000px;
height:100%;
padding-top:20px;
}
</style>
定義 html 及 body 的樣式，讓顯示文字比較容易看到。
HTML
<body class="claro">
First line.< br >Second line.
</body>
html 裡只簡單的定義了一個文字段落以供修改屬性值。
Script
程式的部份就是 get 和 set ，也不用多費唇舌解釋了。注意一下第 10~20 行的執行的結果。
沒有留言:
張貼留言