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" <?>
Это, конечно, не работает. Как это должно быть написано правильно?
Правильный способ управления 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>
Да, как указано в комментарии, общий способ установки/получения значений атрибутов HTML - с помощью setAttribute()
, getAttribute()
.
Итак, вы бы сделали что-то вроде:
let element = document.getElementById('#someId'); element.setAttribute('name-of-the-attribute', value);
Посмотрите здесь
backOfferButton.setAttribute('data-target', '#addDifferentOffer')
?