Setel atribut khusus menggunakan JavaScript

119

Saya menggunakan The DynaTree (https://code.google.com/p/dynatree) tetapi saya mengalami beberapa masalah dan berharap seseorang dapat membantu ..

Saya menampilkan pohon di halaman seperti di bawah ini:

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

Namun saya mencoba untuk mengubah ikon pada suatu item tidak peduli apakah itu dipilih atau tidak hanya menggunakan JavaScript .

ikon baru yang ingin saya gunakan adalah base2.gif

Saya telah mencoba menggunakan yang berikut tetapi sepertinya tidak berhasil:

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

ada yang tahu apa yang mungkin saya lakukan salah?

javascript dom dynatree Aaron
sumber
3
kata kunci dataadalah prefiks. Anda harus menggunakandata-you-attribute-name
MilkyWayJoe
6
@Aaron Anda harus memilih jawaban terbaik.
0x499602D2

Jawaban:

202

Gunakan setAttributemetode:

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

Tetapi Anda benar-benar harus menggunakan data yang diikuti dengan tanda hubung dan dengan propertinya, seperti:

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

Dan untuk melakukannya di JS gunakan datasetproperti:

document.getElementById('item1').dataset.icon = "base.gif";
0x499602D2
sumber
9
Properti kumpulan data mungkin berguna jika hanya browser yang sesuai dengan HTML5 yang dipertimbangkan, tetapi itu adalah daftar singkat dan dukungan yang lebih luas diperlukan untuk web umum. Saya akan tetap menggunakan setAttribute untuk saat ini.
RobG
masih tidak bisa membuatnya berfungsi dengan menggunakan document.getElementById ('item1'). setAttribute ('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1' ");
Aaron
2
Apa sebenarnya yang Anda lakukan dalam kode yang membuat Anda menyadari bahwa itu tidak berfungsi?
0x499602D2
Saya telah menambahkan kode dan menambahkan peringatan di akhir (sehingga akan tetap aktif ketika kode selesai), dan saya juga dapat melihat ikon tidak berubah. (ketika saya menghapus kode adalah melihat tampilan alart saya, jadi saya tahu ada yang salah dengan kode yang baru saja saya tambahkan.)
Aaron
IE <= 8 tidak mendukung setAttribute
RTF
56

Harap gunakan dataset

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

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

jadi dalam kasus Anda untuk menyetel data:

getElementById('item1').dataset.icon = "base2.gif";
Sergej Jevsejev
sumber
1
Juga (bila perlu), gunakan camelCase untuk merujuk ke nama yang diberi tanda hubung (string dalam tanda kurung gagal).
2540625
6
jsperf.com/html5-dataset-vs-native-setattribute Metode yang disarankan ini jauh lebih lambat
rasemat
4

Untuk orang yang datang dari Google, pertanyaan ini bukan tentang atribut data - OP menambahkan atribut non-standar ke objek HTML mereka, dan bertanya-tanya bagaimana cara menyetelnya.

Namun, Anda tidak harus menambahkan atribut khusus untuk properti Anda - Anda harus menggunakan atribut Data - misalnya OP seharusnya digunakan data-icon, data-url, data-target, dll

Bagaimanapun, ternyata cara Anda menyetel atribut ini melalui JavaScript adalah sama untuk kedua kasus tersebut. Menggunakan:

ele.setAttribute(attributeName, value);

untuk mengubah atribut yang diberikan attributeNamemenjadi valueuntuk elemen DOM ele.

Sebagai contoh:

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

Perhatikan bahwa Anda juga dapat menggunakan .datasetuntuk menyetel nilai atribut data, tetapi seperti yang ditunjukkan @racemic, ini 62% lebih lambat (setidaknya di Chrome di macOS pada saat penulisan). Jadi saya akan merekomendasikan menggunakan setAttributemetode ini sebagai gantinya.

Toastrackenigma
sumber