изменение атрибута кнопки назначения данных с помощью ванильного JavaScript

1

Ive получил кнопку, которая закрывает bootstrap modal, как показано ниже:

<button id="back_offer_button" type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>

Я хочу иметь возможность динамического изменения данных-цели с помощью ванильного javascript в другом месте:

Например, сейчас

data-target="#addOffer"

Я хочу изменить его на

data-target="#addDifferentOffer"

Поэтому я попытался получить эту кнопку:

var backOfferButton = document.getElementById('back_offer_button');

А потом:

backOfferButton.data-target = "#addDifferentOffer" <?>

Это, конечно, не работает. Как это должно быть написано правильно?

  • 3
    backOfferButton.setAttribute('data-target', '#addDifferentOffer') ?
Теги:
custom-data-attribute

2 ответа

3
Лучший ответ

Правильный способ управления data-* attributes заключается в использовании dataset:

var backOfferButton = document.getElementById('back_offer_button');
backOfferButton.dataset.target = "#addDifferentOffer";

Надеюсь это поможет.

var backOfferButton = document.getElementById('back_offer_button');

console.log(backOfferButton.dataset.target);

backOfferButton.dataset.target = "#addDifferentOffer";

console.log(backOfferButton.dataset.target);
<button id="back_offer_button" type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#addOffer">Go back</button>
Поделиться
  • 2
    Это тоже правильный путь, еще раз спасибо за вашу помощь
  • 2
    Главы для совместимости со старыми браузерами (если вы нацелены на них), developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
Показать ещё 2 комментария
1

Да, как указано в комментарии, общий способ установки/получения значений атрибутов HTML - с помощью setAttribute(), getAttribute().

Итак, вы бы сделали что-то вроде:

let element = document.getElementById('#someId'); element.setAttribute('name-of-the-attribute', value); Посмотрите здесь

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню