如何通过JavaScript更改HTML自定义属性值？

Question

我现在有这样的：

<div id="e2" 
    class="progress-bar progress-bar-danger active" 
    role="progressbar" data-transitiongoal="45"> 

而且我想改变在运行时的数据transitiongoal值。

这并没有为我工作：

document.getElementById("e2").setAttribute("data-transitiongoal", "10"); 

Answer 1

正如你说，你要在运行时发生变化，你已经尝试过一个解决方案，将在加载本身改变它，我建议你的事。
请仔细阅读以了解，然后只复制下面的代码。

1. 设置Timeout function其中改变数据和在函数内部中，为了避免重复执行清除Timeout。
2. 以毫秒为单位设置持续时间，以便在多长时间后进行更改。 2000 - > 2秒。 0 - >立即（秒* 1000）。

您可以检查控制台和持续时间以检测更改何时何地出现。

console.log(document.getElementById('e2')); // log actual element -> 45 
 
var SIT=window.setTimeout(function(){ 
 
    document.getElementById("e2").setAttribute("data-transitiongoal", "10"); 
 
    console.log(document.getElementById('e2')); 
 
    window.clearTimeout(SIT); 
 
},2000); // change duration 
 
// log changed element -> 10

<div id="e2" class="progress-bar progress-bar-danger active" role="progressbar" data-transitiongoal="45">Something</div>

Answer 2

也许你正在做别的错误的，因为setAttribute()作品。你能发布更多的代码吗？见自己：

var elem = document.getElementById("e2"); 
 

 
console.log(elem.getAttribute("data-transitiongoal")); 
 
elem.setAttribute("data-transitiongoal", 10); 
 
console.log(elem.getAttribute("data-transitiongoal"));

<div id="e2" class="progress-bar progress-bar-danger active" role="progressbar" data-transitiongoal="45">

Answer 3

好吧，我纠正这个问题。 我修复了一些其他问题，并开始工作。 感谢解决方案的人，它也帮助我。