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

Question

我已经关闭了启动模态的按钮，如下所示：

<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" <?>

这当然是行不通的。应该如何正确书写？

Answer 1

正确的管理方法data-* attributes是使用dataset：

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

希望这可以帮助。

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);