Forums » HTML & HTML 5

Trabalhando com Data-Attributes no HTML 5 e JavaScript

  • Oliveira Dario
    • 439 posts
    21 de novembro de 2018 13:05:15 ART
    HTML Code

    Criar Div com os seguintes atributos.


    id='Produtos' data-peso='5kg' data-marca='Vasconcelos' data-produto='Arroz' data-preco=''


    Javascript Code

    // Pegar data-attributes usando getAttribute
    var Produtos = document.getElementById('Produtos');
    var peso = Produtos.getAttribute('data-peso');
    var marca = Produtos.getAttribute('data-marca');
    var produto = Produtos.getAttribute('data-produto');

    alert("Produto: "+produto+" Peso: "+peso+" Marca: "+marca);

    // Alterar dados data-attributes usando setAttribute
    Produtos.setAttribute('data-preco','10'); // Colocar Preço no Produto

    // Pegar o Preço do Produto Inserido
    var preco = Produtos.getAttribute('data-preco');

    alert("Preço: "+preco);
    Este post foi editado por Oliveira Dario em 21 de novembro de 2018 13:17:58 ART"
    null