通过 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

是的，正如评论中所述，setting/getting HTML 属性值的一般方法是使用 setAttribute()、getAttribute() 方法。

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

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

Answer 2

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

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

data-target button attribute change via vanilla javascript

javascript

custom-data-attribute