If the browser does not support .dataset
then you can use .setAttribute
to exchange the value and .getAttribute
to get him, so:
var teste = document.getElementById('teste');
teste.setAttribute("data-delay-duration", "100");
console.log("data-delay-duration:", teste.getAttribute("data-delay-duration"));
console.log("source:", document.body.innerHTML);
<span id="teste" data-delay-duration="800"></span>
Just for the record, although the kennel states that IE8, 9 e 10 has partial support to dataset
and data-
in https://caniuse.com/#feat=dataset, in fact they refer to the use of getAttribute
same, that is to say .dataset
not available, according to their message:
Partial support refers to being Able to use data-* Attributes and access them using getattribute.
So if you need one of these browsers you will have to use the.setAttribute
.
If to apply for multiple elements, as a NodeList
, can use any method for this (depending on the elements), as some examples:
document.getElementsByTagName
document.getElementsByName
document.querySelectorAll
I believe that the querySelectorAll
is the simplest to use, so:
var els = document.querySelectorAll('.foo, .baz');
for (var i = 0, j = els.length; i < j; ++i) {
els[i].setAttribute("data-delay-duration", "100");
}
console.log("source:", document.body.innerHTML);
<span class="foo" data-delay-duration="800"></span>
<span class="bar" data-delay-duration="800"></span>
<span class="baz" data-delay-duration="800"></span>
<span class="foo" data-delay-duration="800"></span>
<span class="foo" data-delay-duration="800"></span>
<span class="foo" data-delay-duration="800"></span>
Note that in this example only elements with class=foo
and class=baz
has the value exchanged
Note: to check if the DOM has already loaded you can run the script like this:
(function () { //Isola o escopo para evitar conflito com outras funções e vars
function trigger() {
var els = document.querySelectorAll('.foo, .baz');
for (var i = 0, j = els.length; i < j; ++i) {
els[i].setAttribute("data-delay-duration", "100");
}
}
if (document.readyState !== "loading") {
trigger();
} else {
document.addEventListener("DOMContentLoaded", trigger);
}
})();
True William, have to have browser support, I did not put in my answer.
– LeAndrade
Thank you very much. Actually, this data-delay-Duration appears more than once on the site. Can’t use ID for this. In addition to being a third party service where I can’t handle it.
– Felipe Viero Goulart
@Felipegoulart the ID is just example, I will formulate one with Nodelist, an instant
– Guilherme Nascimento
@Guilhermebirth an example of how many times this attribute appears on https://jsfiddle.net/ujhpawoe/1/
– Felipe Viero Goulart
@Felipegoulart see the answer edition.
– Guilherme Nascimento
@Guilhermenascimento I understood his code. The funny thing is that he does not execute Tampermonkey
– Felipe Viero Goulart
@Felipegoulart which error appears in the console?
– Guilherme Nascimento
@Guilhermenascimento does not show any error regarding the attribute. The strange thing is that Tampermonkey is activated. The data-delay-replace continues to be the same. The code looks like this https://jsfiddle.net/a0k32fmj/ The link would be this https://lp.luzdaserra.com.br/Initiesmonthly
– Felipe Viero Goulart
@Felipegoulart see the answer edition.
– Guilherme Nascimento
@Guilhermenascimento unfortunately did not work. But, there must be some problem in Tampermonkey.
– Felipe Viero Goulart