Olá, bom dia galera!
Sou iniciante em javascript e gostaria de saber o que posso usar em javascript para resolver a seguinte solução:
Em um texto ao clicar em qualquer palavra eu tenha a opção de quatro cores para colorir ela.
Obrigado!
Olá, bom dia galera!
Sou iniciante em javascript e gostaria de saber o que posso usar em javascript para resolver a seguinte solução:
Em um texto ao clicar em qualquer palavra eu tenha a opção de quatro cores para colorir ela.
Obrigado!
Este, exemplo que eu criei para você é bem, simples, provalvemente é o que você quer.
<!doctype html>
<html lang="pt-br">
<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>Document</title>
<style>
#mysection {
width: 600px;
font-family: sans-serif;
padding: 50px;
margin: auto;
}
#mytitle {
text-align: center;
}
#myparagraph {
text-align: justify;
}
#mycolor {
width: 133px;
height: 27px;
display: none;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
#mycolor > div {
width: 25px;
height: 25px;
border: 1px solid black;
float: left;
}
#black {
background-color: black;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
#yellow {
background-color: yellow;
}
#exit {
width: 25px;
height: 27px;
}
</style>
</head>
<body>
<section id="mysection">
<h1 id="mytitle">JavaScript</h1>
<p id="myparagraph">
JavaScript, frequentemente abreviado como JS, é uma linguagem de programação interpretada de alto nível, caracterizada também,
como dinâmica, fracamente tipada, prototype-based e multi-paradigma.[2] Juntamente com HTML e CSS, o JavaScript é uma das três
principais tecnologias da World Wide Web. <a href="https://pt.wikipedia.org/wiki/JavaScript">Winkipedia</a>
</p>
</section>
<div id="mycolor">
<div id="black"></div>
<div id="red"></div>
<div id="green"></div>
<div id="yellow"></div>
<button id="exit" type="button">X</button>
</div>
<script>
var p = window.document.querySelector("#myparagraph");
var myColor = window.document.querySelector("#mycolor");
var black = window.document.querySelector("#black");
var red = window.document.querySelector("#red");
var green = window.document.querySelector("#green");
var yellow = window.document.querySelector("#yellow");
var exit = window.document.querySelector("#exit");
p.addEventListener("click", function() {
myColor.style.display = "block";
});
black.addEventListener("click", function() {
p.style.color = "black";
});
red.addEventListener("click", function() {
p.style.color = "red";
});
green.addEventListener("click", function() {
p.style.color = "green";
});
yellow.addEventListener("click", function() {
p.style.color = "yellow";
});
exit.addEventListener("click", function() {
myColor.style.display = "none";
});
</script>
</body>
</html>
bom, na parte javascript eu declarei varias variáveis p, myColor, black, red, green, yellow, exit
. Cada uma dessas variáveis tem um valor, este valor nada mais nada menos do que uma referência aos nomes id
no html. Isso é o mesmo que selecionar um elemento no css e depois aplicar propriedades a ele. depois cada uma dessas variáveis p, black, red, green, yellow, exit
. Recebem um evento usando o addEventListener()
esse evento é um evento de click ou seja quando você clicar no elemento. Em seguida quando o evento de click ocorrer irar disparar um function(){}
que é uma função anônima(uma função que não tem nome) você poderia chamar uma função nomeada(com nome) mais não o fiz, porque se não o código iria ficar bem grande. Dentro da função tem os devidos códigos a serem executados, no p
ele tem myColor.style.display = "block";
ou seja a div
com id="mycolor"
no html irar ficar em formato de block
ela irar aparecer, já que no css nois deixamos ela como display: none
. Depois no black
você tem p.style.color = "black";
ou sejá o parágrafo irar ficar preto e isso irar acontecer também com red, green, yellow
, apenas as cores são diferentes e por ultimo no exit
, tem myColor.style.display = "none";
ou seja a nossa div
que possui o id="mycolor"
irar desaparecer quando eu clicar no button
com o id="exit"
.