Встановити спеціальний атрибут за допомогою JavaScript

119

Я використовую The 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

Відповіді:

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

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

— Аарон

Що саме ви робите в своєму коді, що дає зрозуміти, що він не працює?

— 0x499602D2

Я додав код і додав попередження в кінці (тому воно буде сповіщати, коли код буде зроблено), і я також можу побачити, що значок не змінюється. (коли я видаляю код, бачте мій алармовий дисплей, тож я знаю, що з кодом, який я щойно додав, щось не так)

— Аарон

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, це питання не стосується атрибутів даних - ОП додав у свій 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метод замість цього.

— Тоастракенігма
джерело