Change given inside date attribute

Question

I have a page, which has a timer. That is, when the page opens, after 40 seconds, a Section of the site is loaded. This happens due to a third party service, I cannot handle this kind of information.

But I’d like to manipulate that in my browser.

For example, when loading the page, the attribute is set to 800.

data-delay-duration="800"

I would like to change that. I can’t do that directly on the site because as I commented, this is a third party service.

I installed the Tampermonkey for Google Chrome, I think there may be this possibility. But, I would like to know how to do that. It would be something with the attr jquery?

Answer 1

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);
    }
})();

Answer 2

If it’s with Vanilla you can do it like this:

var teste = document.getElementById('teste');
teste.dataset.delayDuration = 100;

console.log(teste.dataset.delayDuration);

<span id="teste" data-delay-duration="800"></span>

Answer 3

Create this script in tampermonkey and exchange #test for the id you will use and the respective value on the line $('#teste').attr("data-delay-duration","400");.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://stackoverflow.com/questions/10166478/how-to-change-the-value-of-a-custom-attribute
// @grant        none
// ==/UserScript==

// @require http://code.jquery.com/jquery-2.2.4.min.js

var $ = window.jQuery;

(function() {
    'use strict';
    console.log($('#teste').attr("data-delay-duration"));
    $('#teste').attr("data-delay-duration","400");
    console.log($('#teste').attr("data-delay-duration"));
    // Your code here...
})();