Установить собственный атрибут с помощью JavaScript

119

Я использую 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'";

кто-нибудь знает, что я делаю неправильно?

javascript dom dynatree

— Аарон
источник

ключевое слово data- это префикс. Вы должны использоватьdata-you-attribute-name

— MilkyWayJoe

@Aaron Ты должен выбрать лучший ответ.

— 0x499602D2 08

Ответы:

202

Используйте setAttributeметод:

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

Но вам действительно следует использовать данные, за которыми следует тире и его свойство, например:

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

А для этого в JS используйте datasetсвойство:

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

— 0x499602D2
источник

Свойство набора данных может быть полезно, если рассматриваются только браузеры, совместимые с HTML5, но это краткий список, и для общего Интернета требуется более широкая поддержка. Я бы пока придерживался setAttribute .

— RobG 02

по-прежнему не могу заставить его работать с помощью document.getElementById ('item1'). setAttribute ('data', "icon: 'base2.gif', url: 'output.htm', target: 'AccessPage', output: '1' ");

— Aaron

Что именно вы делаете в своем коде, что заставляет вас понять, что он не работает?

— 0x499602D2 02

Я добавил код и добавил предупреждение в конце (чтобы оно сработало, когда код будет готов), и я также вижу, что значок не меняется. (когда я удаляю код, я вижу свой дисплей alart, поэтому я знаю, что с кодом, который я только что добавил, что-то не так.)

— Аарон

IE <= 8 не поддерживает setAttribute

— RTF

Пожалуйста, используйте набор данных

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

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

поэтому в вашем случае для настройки данных:

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

— Сергей Евсеев
источник

Также (при необходимости) используйте camelCase для обозначения имен через дефис (строки в квадратных скобках не работают).

— 2540625

jsperf.com/html5-dataset-vs-native-setattribute Этот предлагаемый метод намного медленнее

— рацемический

Для людей, пришедших из Google, этот вопрос не об атрибутах данных - OP добавила нестандартный атрибут к своему объекту HTML и задалась вопросом, как его установить.

Тем не менее, вы не должны добавлять пользовательские атрибуты для ваших свойств - вы должны использовать атрибуты данных - например , OP должен использовать data-icon, data-url, data-targetи т.д.

В любом случае оказывается, что способ установки этих атрибутов с помощью JavaScript в обоих случаях одинаков. Использование:

ele.setAttribute(attributeName, value);

изменить данный атрибут , attributeNameчтобы valueдля элемента DOM ele.

Например:

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

Обратите внимание, что вы также можете использовать .datasetдля установки значений атрибутов данных, но, как указывает @racemic, это на 62% медленнее (по крайней мере, в Chrome на macOS на момент написания). Поэтому я бы рекомендовал использовать этот setAttributeметод.

— Toastrackenigma
источник