Đặt thuộc tính dữ liệu bằng cách sử dụng JavaScript

Question

Tôi đang sử dụng The DynaTree (https://code.google.com/p/dynatree) nhưng tôi đang gặp một số sự cố 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 item không có vấn đề nếu 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 được base2.gif

Tôi đã thử bằng cách sử dụng sau đây nhưng nó dường như không làm việc:

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

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

Answer 1

Sử dụng setAttribute phươ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ự cần phải sử dụng dữ liệu theo sau với một dấu gạch ngang và với tài sản của mình, như:

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

Và để làm điều đó trong JS sử dụng dataset thuộc tính:

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

Answer 2

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" 

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

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