[英]Set custom attribute using JavaScript
我正在使用 The DynaTree (https://code.google.com/p/dynatree),但我遇到了一些問題,希望有人能提供幫助。
我在頁面上顯示樹,如下所示:
<div id="tree">
<ul>
<li class="folder">Outputs
<ul>
<li id="item1" data="icon: 'base.gif', url: 'page1.htm', target: 'AccessPage'">Item 1 Title
<li id="item2" data="icon: 'base.gif', url: 'page2.htm', target: 'AccessPage'">Item 2 Title
<li id="item3" data="icon: 'base.gif', url: 'page3.htm', target: 'AccessPage'">Item 3 Title
<li id="item4" data="icon: 'base.gif', url: 'page4.htm', target: 'AccessPage'">Item 4 Title
</ul>
</ul>
</div>
但是,我正在嘗試更改項目上的圖標,無論它是否被選中或僅使用JavaScript 。
我要使用的新圖標是 base2.gif
我嘗試使用以下方法,但似乎不起作用:
document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";
有誰知道我可能做錯了什么?
使用setAttribute
方法:
document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");
但是你真的應該使用 data 后跟一個破折號和它的屬性,比如:
<li ... data-icon="base.gif" ...>
並在 JS 中使用dataset
屬性:
document.getElementById('item1').dataset.icon = "base.gif";
請使用數據集
var article = document.querySelector('#electriccars'),
data = article.dataset;
// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"
所以在你設置數據的情況下:
getElementById('item1').dataset.icon = "base2.gif";
對於來自 Google 的人來說,這個問題與數據屬性無關 - OP 在他們的 HTML 對象中添加了一個非標准屬性,並想知道如何設置它。
但是,您不應該向您的屬性添加自定義屬性 - 您應該使用數據屬性- 例如 OP 應該使用data-icon
、 data-url
、 data-target
等。
無論如何,事實證明,您通過 JavaScript 設置這些屬性的方式在這兩種情況下都是相同的。 用:
ele.setAttribute(attributeName, value);
將給定的屬性attributeName
更改為 DOM 元素ele
value
。
例如:
document.getElementById("someElement").setAttribute("data-id", 2);
請注意,您還可以使用.dataset
來設置數據屬性的值,但正如@racemic 指出的那樣,它慢了 62% (至少在撰寫本文時在 macOS 上的 Chrome 中)。 所以我建議改用setAttribute
方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.