通过vanilla javascript更改数据目标按钮属性

Question

我有按钮关闭bootstrap模式如下：

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

我希望能够通过vanilla javascript动态更改数据目标到不同的位置：

例如现在是

data-target="#addOffer"

我想把它改成

data-target="#addDifferentOffer"

所以我试着得到这个按钮：

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

接着：

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

这当然不起作用。 怎么写得正确？

Answer 1

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

Answer 2

是的，如注释中所述，设置/获取HTML属性值的一般方法是使用setAttribute() ， getAttribute()方法。

所以，你会做类似的事情：

let element = document.getElementById('#someId'); element.setAttribute('name-of-the-attribute', value); 看看这里