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

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

2 个答案: