Đặt thuộc tính tùy chỉnh bằng JavaScript

Tôi đang sử dụng The DynaTree (https://code.google.com/p/dynatree) nhưng tôi đang gặp một số vấn đề và hy vọng ai đó có thể giúp ..

Tôi đang hiển thị cây trên trang như dưới đây:

<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>

Tuy nhiên, tôi đang cố gắng thay đổi biểu tượng trên một mục bất kể nó được chọn hay không chỉ sử dụng JavaScript .

biểu tượng mới tôi muốn sử dụng là base2.gif

Tôi đã thử sử dụng cách sau nhưng dường như không hoạt động:

document.getElementById('item1').data = "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'";

bất cứ ai biết những gì tôi có thể đang làm sai?

Sử dụng setAttributephương pháp:

document.getElementById('item1').setAttribute('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1'");

Nhưng bạn thực sự nên sử dụng dữ liệu theo sau bằng dấu gạch ngang và với thuộc tính của nó, như:

<li ... data-icon="base.gif" ...>

Và để làm điều đó trong JS, hãy sử dụng thuộc datasettính:

document.getElementById('item1').dataset.icon = "base.gif";

Vui lòng sử dụng tập dữ liệu

var article = document.querySelector('#electriccars'),
    data = article.dataset;

// data.columns -> "3"
// data.indexnumber -> "12314"
// data.parent -> "cars"

vì vậy trong trường hợp của bạn để thiết lập dữ liệu:

getElementById('item1').dataset.icon = "base2.gif";

Đối với những người đến từ Google, câu hỏi này không phải về các thuộc tính dữ liệu - OP đã thêm một thuộc tính không chuẩn vào đối tượng HTML của họ và tự hỏi làm thế nào để đặt nó.

Tuy nhiên, bạn không nên thêm thuộc tính tuỳ chỉnh để tài sản của bạn - bạn nên sử dụng các thuộc tính dữ liệu - ví dụ như OP nên đã sử dụng data-icon, data-url, data-targetvv

Trong mọi trường hợp, hóa ra cách bạn đặt các thuộc tính này qua JavaScript là giống nhau cho cả hai trường hợp. Sử dụng:

ele.setAttribute(attributeName, value);

để thay đổi thuộc tính đã attributeNamecho valuecho phần tử DOM ele.

Ví dụ:

document.getElementById("someElement").setAttribute("data-id", 2);

Lưu ý rằng bạn cũng có thể sử dụng .datasetđể đặt giá trị của thuộc tính dữ liệu, nhưng như @racemic chỉ ra, tốc độ này chậm hơn 62% (ít nhất là trong Chrome trên macOS tại thời điểm viết bài). Vì vậy, tôi khuyên bạn nên sử dụng setAttributephương pháp này để thay thế.