如何在html文件中更改onclick属性？

Question

我有一个进度条,想要将其data-pro-bar-percent属性值更改80为100单击链接时.

属性更改应如下所示: data-pro-bar-percent="80"- >data-pro-bar-percent="100"

这是HTML:

<a class="button" href="#">Click Link</a>
<div class="pro-bar-container color-green-sea">
    <div class="pro-bar bar-100 color-turquoise" data-pro-bar-percent="30" data-pro-bar-delay="4000">
        <div class="pro-bar-candy candy-ltr"></div>
    </div>
</div>

Answer 1

链接不是按钮!使用按钮!

使用DOM的setAttribute方法来更改数据属性.这很棘手,你可以通过它的类名获取百分比元素(如果它与另一个元素共享一个类名,你可能想要使用this.children.children.setAttribute()),所以抓住你想要的最接近的嵌套子.

只需设置链接/按钮元素eventListener(如果它在表单中,默认情况下按钮的作用类似于提交按钮,因此您可能需要阻止默认操作),并为其提供更改数据属性的功能.

<button id="myButton">Click Me</button>

var button = document.getElementById("myButton");
button.addEventListener("click",function() {
    document.getElementsByClassName("pro-bar")[0].setAttribute("data-pro-bar-percent","100");
}, false);

作为@rlemon评论,getElementsByClassName 缺乏支持是querySelector 做,所以你应该使用来代替.

document.querySelector(".pro-bar").setAttribute("data-pro-bar-percent","100");