JavaScript kullanarak özel özellik ayarlayın

119

DynaTree'yi (https://code.google.com/p/dynatree) kullanıyorum ama bazı sorunlar yaşıyorum ve birinin yardım edebileceğini umuyorum ..

Ağacı aşağıdaki gibi sayfada gösteriyorum:

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

Ancak, bir öğenin üzerindeki simgeyi seçili olsun veya olmasın yalnızca JavaScript kullanarak değiştirmeye çalışıyorum .

kullanmak istediğim yeni simge base2.gif

Aşağıdakileri kullanmayı denedim ama işe yaramıyor gibi görünüyor:

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

Neyi yanlış yaptığımı bilen var mı?

javascript dom dynatree

— Aaron
kaynak

anahtar kelime databir önek. Kullanmalısınızdata-you-attribute-name

— MilkyWayJoe

@Aaron En iyi cevabı seçmelisiniz.

— 0x499602D2

Yanıtlar:

202

setAttributeYöntemi kullanın :

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

Ama gerçekten bir tire ve özelliği ile takip edilen verileri kullanmanız gerekir, örneğin:

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

Ve bunu JS'de yapmak için datasetözelliği kullanın :

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

— 0x499602D2
kaynak

Veri kümesi özelliği, yalnızca HTML5 ile uyumlu tarayıcılar dikkate alınırsa yararlı olabilir, ancak bu kısa bir listedir ve genel web için daha geniş destek gerekir. Şimdilik setAttribute kullanmaya devam ediyorum .

— RobG

yine de document.getElementById ('item1'). setAttribute ('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output kullanarak çalışmasını sağlayamıyor. '1' ");

— Aaron

Kodunuzda, çalışmadığını anlamanızı sağlayan tam olarak ne yapıyorsunuz?

— 0x499602D2

Kodu ekledim ve sonuna bir uyarı ekledim (böylece kod bittiğinde ortaya çıkacak) ve simgenin değişmediğini de görebiliyorum. (Kodu kaldırdığımda alart ekranımı görüyor, bu yüzden az önce eklediğim kodda bir sorun olduğunu biliyorum.)

— Aaron

IE <= 8 setAttribute desteklemez

— RTF

Lütfen veri kümesini kullanın

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

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

yani sizin durumunuzda veri ayarlamak için:

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

— Sergej Jevsejev
kaynak

Ayrıca (uygun olduğunda), tireli adlara başvurmak için camelCase kullanın (köşeli parantezli dizeler başarısız olur).

— 2540625

jsperf.com/html5-dataset-vs-native-setattribute Bu önerilen yöntem çok daha yavaştır

— rasemik

Google'dan gelen kişiler için bu soru veri öznitelikleriyle ilgili değildir - OP, HTML nesnelerine standart olmayan bir öznitelik ekledi ve bunun nasıl ayarlanacağını merak etti.

Ancak, eklemek olmamalıdır özel Özelliklerde niteliklerini - Eğer gerektiği kullanmak veri özelliklerini - örneğin OP kullanılmış olmalıdır data-icon, data-url, data-targetvb

Her durumda, bu nitelikleri JavaScript aracılığıyla ayarlama şeklinizin her iki durumda da aynı olduğu ortaya çıkar. kullanın:

ele.setAttribute(attributeName, value);

DOM öğesi için verilen özelliği olarak attributeNamedeğiştirmek valueiçin ele.

Örneğin:

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

.datasetVeri özniteliklerinin değerlerini ayarlamak için de kullanabileceğinizi unutmayın , ancak @racemic'in de belirttiği gibi, % 62 daha yavaştır (en azından yazma sırasında macOS'taki Chrome'da). Bu yüzden setAttributeonun yerine yöntemi kullanmanızı tavsiye ederim .

— Toastrackenigma
kaynak