dojo/dom-attr
簡介
dojo/dom-attr 可以用來修改節點的 attribute，（因為在中文裡，attribute 和 property 都譯為「屬性」，在 HTML 裡兩者的定義其實並不完全相同，因此在文中直接使用英文，避免混淆。）在 HTML 中，各種不同的節點各自擁用不同的 attribute。例如：<p> 標記就沒有 width 和 height 兩個 attribute，而 <img> 標記則有，如果寫成 <p width="50px" height="50px">;，其中的 width 和 height 雖然設定了，但並不會有作用，流覽器會忽略這些設定。而在<img> 中設定 width 和 height，則會改變圖片的寬和高。在 dojo 中，有 dojo/dom-attr 和 dojo/dom-prop 兩個模組，都可以用來修改各節點的 attribute。根據未確認的網路說法，dojo/dom-attr 可能在將來會被淘汰，而由 dojo/dom-prop 擔當修改所有 attribute 和 property 的責任；屆時，在 dojo 中也就不再區分 attribute 和 property 在定義上的不同了。只有一點要注意，設定樣式 (style) 的部份，dojo 另有一個模組 dojo/dom-style 來處理，dojo/dom-prop 和 dom/dom-prop 都不負責這部份。
dojo/dom-attr 有三個函式可供使用，用法也很簡單：
- has(node, attr):
- 用來偵測 node 中是否有定義名為 attr 的 attribute。這裡並非指 node 這個節點在 HTML 定義中是否具有 attr，而是在 node 中是否定義了 attr。以
<img>為例，雖然在 HTML 的定義中並不具有 width 這個 attribute，但只要有設定值，has() 便會傳回 true ；即便流覽器會忽略這個設定。如果沒有設定，則傳回 false。
- get(node, attr):
- 取得在 node 中的 attr 設定值。若不曾設定，則傳回 null。
- set(node, attr, value):
- 在 node 中設定 attr 的值為 value。不論在 HTML 中 node 標記的定義是否含有 attr 這個 attribute，只要呼叫了 set()，這個設定便會被加到 node 之中，在呼叫 has() 偵測時，也會傳回 true。流覽器則依據 HTML 的對該節點的定義是否具有該 attribute ，決定是否處理或忽略該設定。基本上 set() 就是要 attr 和 value 組合成一個字串，然後加到 node 標記中。
範例
範例中簡單的定義了一個段落標記，然後藉著 dojo/dom-attr 模組所提供的功能，以程式的方式修改該段落的 attribute。記得開啓主控台觀看輸出結果，從開發者工具中，也可以觀看 HTML 碼的變化。
CSS
<style> </style>
沒有 CSS 的設定。
HTML
<body class="claro">
A paragraph
</body>
HTML 中，簡單的建立一個文字段落做為測試用。
Script
第 4 行之所以會傳回 true，是因為在第 3 行設定了 width 。
第 6 行傳回 null ，因為並沒有設定 height 值。
也可以用第 8 行的方式改變段落的樣式，但最好用 dojo/dom-style 來處理會比較方便。如果將來 dojo/dom-attr 真的被淘汰了，也不用再修改程式。
沒有留言:
張貼留言