2

Tenho uma página, onde possui um timer. Ou seja, quando a página é aberta, após 40 segundos, uma section do site é carregada. Isso acontece devido a um serviço de terceiros, não consigo manipular esse tipo de informação.

Mas gostaria de manipular isso no meu navegador.

Por exemplo, ao carregar a página, o atributo recebe o valor 800.

data-delay-duration="800"

Eu gostaria de mudar isso. Não consigo fazer isso diretamente no site, pois como comentei, isso é um serviço de terceiro.

Eu instalei o Tampermonkey para Google Chrome, acho que pode haver essa possibilidade. Mas, gostaria de saber como fazer isso. Seria algo com o attr do JQuery?

3 Respostas 3

4

Se o navegador não tiver suporte ao .dataset então pode usar .setAttribute para trocar o valor e .getAttribute para obter ele, assim:

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>

Só pra constar, apesar do caniuse afirmar que IE8, 9 e 10 tem suporte parcial ao dataset e data- em https://caniuse.com/#feat=dataset, na verdade eles se referem ao uso de getAttribute mesmo, ou seja .dataset não esta disponível, conforme a mensagem deles:

Partial support refers to being able to use data-* attributes and access them using getAttribute.

Então se necessitar de um destes navegadores terá que usar o.setAttribute.

Se for para aplicar para multiplos elementos, como um NodeList, pode usar qualquer método para isto (dependendo dos elementos), como alguns exemplos:

  • document.getElementsByTagName
  • document.getElementsByName
  • document.querySelectorAll

Creio que o querySelectorAll é o mais simples de usar, assim:

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>

Veja que nesse exemplo somente elementos com class=foo e class=baz tem o valor trocado

Nota: para checar se o DOM já carregou você pode executar o script assim:

(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);
    }
})();
10
  • 1
    Verdade Guilherme, tem que ter suporte do navegador, acabei não colocando na minha resposta.
    – LeAndrade
    14/08/2018 às 19:33
  • Muito obrigado. Na verdade, esse data-delay-duration aparece mais de uma vez no site. Não da para usar ID por isso. Além de ser um serviço de terceiro onde eu não consigo manipular isso. 15/08/2018 às 12:25
  • @FelipeGoulart o ID é apenas exemplo, vou formular um com NodeList, um instante
    – Syzoth
    15/08/2018 às 12:40
  • @GuilhermeNascimento um exemplo de quantas vezes esse atributo aparece no site jsfiddle.net/ujhpawoe/1 15/08/2018 às 12:45
  • @FelipeGoulart veja a edição da resposta.
    – Syzoth
    15/08/2018 às 12:46
0

Se for com Vanilla dá para fazer assim:

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

console.log(teste.dataset.delayDuration);
<span id="teste" data-delay-duration="800"></span>

2
  • 2
    Algo importante a ser comentado: ao fazer delayduration = 100 você criou outro atributo. O JavaScript diferencia maiúsculas de minúsculas e, no dataset, o atributo data-delay-duration será dataset.delayDuration, com o d em Duration maiúsculo.
    – Woss
    14/08/2018 às 19:31
  • Verdade Anderson, foi eu que escrevi errado mesmo.
    – LeAndrade
    14/08/2018 às 19:35
-3

Crie este script no tampermonkey e troque #teste pelo id que você for usar e o respectivo valor na linha $('#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...
})();
10
  • 2
    Poderia adicionar uma explicação do que o seu código está fazendo? Sim, fui eu que negativei. Estou dando o feedback, para você não ficar sem saber o que houve. 14/08/2018 às 19:25
  • Bom... Usando o tampermonkey e jQuery, a resposta é basicamente a linha $('#teste').attr("data-delay-duration","400");, que seta o atributo data-delay-duration com o valor 400. O resto é para poder rodar o exemplo.
    – thxmxx
    14/08/2018 às 20:13
  • Você precisa adicionar isso à resposta. A ideia do site é que a pergunta e a resposta ajudem, não só quem está com o problema atual, mas outros usuários que vierem aqui no futuro. Sugiro que clique em "editar" e adicione os detalhes à sua resposta. me comprometo em remover meu negativo, caso algo melhore na sua resposta. 14/08/2018 às 20:15
  • Bom... eu editei... mas não concordo com os downvotes, qualquer programador entende o que rolava no post original ;). Segue o baile.
    – thxmxx
    14/08/2018 às 20:24
  • 2
    Errado, jovem. Não é qualquer programador [em qualquer nível] que entendo o código só de olhar. Sempre é bom ter uma explicação. Pessoas que estão aprendendo a programar também acessam o site. 14/08/2018 às 20:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .