Skip to content

Instantly share code, notes, and snippets.

@jonataa

jonataa/data-attributes.html

Created March 11, 2018 14:45
Show Gist options
  • Save jonataa/779cf177c1e156f8ebc49b39ef282eeb to your computer and use it in GitHub Desktop.
Save jonataa/779cf177c1e156f8ebc49b39ef282eeb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
data-attributes.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WeberSchool - DOM</title>
</head>
<body>
<button
onclick="alterarCor(this)"
data-minha-cor="red"
data-meu-tamanho="50px" data-name="titulo1">Vermelho</button>
<button
onclick="alterarCor(this)"
data-minha-cor="blue"
data-meu-tamanho="70px" data-name="titulo2">Azul</button>
<button
onclick="alterarCor(this)"
data-minha-cor="green"
data-meu-tamanho="70px" data-name="titulo3">Verde</button>
<h1 id="titulo2">Hello, World Azul!</h1>
<h1 id="titulo1">Hello, World Vermelho</h1>
<h1 id="titulo3">Hello, World Verde</h1>
<script>
function alterarCor(meuBotao) {
var cor = meuBotao.dataset.minhaCor;
var tamanho = meuBotao.dataset.meuTamanho;
var btn = meuBotao.dataset.name;
var titulo = document.getElementById(btn);
titulo.style.color = cor;
titulo.style.fontSize = tamanho;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment