簡體   English   中英

使用 JavaScript 設置自定義屬性

[英]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-icondata-urldata-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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM