javascript - 如何更改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 lacks the support querySelector does ，所以你应该使用它。

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