6

<html>
<head>
<meta charset="utf-8"/>
<style>

.alterar{ 
   color:red;
   text-align: justify;
}
</style>
<title></title>
</head>
<body>
<h1> texto qual quer </h1>

<input id="botao" type="button"  value="Mudar de cor "/>


</html>

Pessoal estou fazendo uma pagina html basico e preciso fazer que ao clicar em um botão o texto fique vermelho e justificado.

alguém pode ajudar ?

2
  • Cara coloque o que vc já tem de código ai. É para ser só com HTML e CSS ou pode usar script?
    – hugocsl
    28/04/2019 às 21:20
  • Coloquei, sim pode usar script 28/04/2019 às 21:29

5 Respostas 5

13

Uma opção só com html e css é usando o seletor ~ com ele quando o checkbox estiver checked vc troca a cor to texto e muda o alinhamento.

Aqui vc pode ler mais sobre esse combinador de seletor adjacente ~ https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

OBS: Se vc quiser esconder o checkbox coloque no ID dele display:none, ai vc clica direto só no texto da label

inserir a descrição da imagem aqui

#muda:checked ~ .box {
    color: red;
    text-align: justify;
}
.box {
    width: 300px;
    border: 1px solid #000;
}
<input type="checkbox" name="" id="muda">
<label for="muda">muda cor e justifica</label>
<div class="box">
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima odio qui, dolore, doloremque deleniti labore iure sit nulla totam adipisci optio quo! Dolor, deserunt! Delectus assumenda eos dicta quasi dignissimos.
</div>

2
  • 1
    Obrigado hugo, ajudou bastante! 29/04/2019 às 0:02
  • @DiogoSerravalle Sem problemas meu caro, eu fico feliz em ter ajudado
    – hugocsl
    29/04/2019 às 1:58
5

Boa noite Diogo, tem várias maneiras de fazer isso: A mais simples imagino que seria criando uma função em javaScript que altere a cor do texto desse modo e chama-la no html:

...
<body>

<h1> texto qual quer </h1>
<input id="botao" type="button" value="Mudar de cor " onclick="mudarCor()"/>

<script>

    function mudarCor(){
        // referencia o primeiro 'h1' do layout html
        const texto = document.getElementsByTagName('h1')[0];

        texto.style.color = 'blue';
        texto.style.textAlign = 'justify';
    }

</script>
</html>

É possível fazer isso sem alterar o html de sua página, apenas adicionando um listener (escutador) para o botao, em javascript. Desse modo:

<body>
<h1> texto qual quer </h1>

<input id="botao" type="button" value="Mudar de cor"/>

<script>
    // referencia o primeiro 'h1' do layout html
    const texto = document.getElementsByTagName('h1')[0];
    // referencia o botao
    const botao = document.getElementById('botao');

    // adicionar um listener de click no botao
    botao.addEventListener('click', function(){
        texto.style.color = 'blue';
        texto.style.textAlign = 'justify';
    })
</script>
</html>
1
  • Obrigado Rafael ajudou bastante, se eu precisar criar um outro botão mas nesse outro a formatação seja: identado 20px apenas na primeira linha , tamanho 130% e negrito como ficar no script ? 29/04/2019 às 0:03
4

Uma maneira de utilizar um botão e trocar o texto da div é utilizar o pseudo-elemento :target e colocar um elemento a dentro do botão e manipular a div pelo seu id:

a{
    text-decoration: none;
    color: #000;
}
.box{
    width: 300px;
    border: 1px solid #000;
}
.box:target {
    color: red;
    text-align: justify;
}
<button><a href="#box">Mudar Cor</a></button>
<div class="box" id="box">
     Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima odio qui, dolore, doloremque deleniti labore iure sit nulla totam adipisci optio quo! Dolor, deserunt! Delectus assumenda eos dicta quasi dignissimos.
</div>

Esta maneira só funciona ao clicar uma vez, se desejar que ao clicar novamente o texto fique com estilo inicial, o mais recomendado é como o Hugo fez utilizando checkbox

4

Pode usar o método .classList.add('nome da classe') que irá adicionar a classe .alterar ao elemento selecionado quando o botão for clicado. Pode colocar o código dentro de um atributo onclick:

onclick="document.querySelector('h1').classList.add('alterar')"
         ↑__________________________↑ ↑______________________↑
                      |                           |
            seleciona o elemento         adiciona a classe

Vale notar que o document.querySelector('h1') irá selecionar apenas o primeiro elemento h1 que encontrar. Portanto, se você tiver mais de um <h1> na página, será necessário identificá-lo com um id específico para aquele elemento, inserindo um atributo id:

<h1 id="h1"> texto qual quer </h1>
    ↑↑↑↑↑↑↑

E colocar a id do elemento do document.querySelector para que o click no botão seja direcionado somente àquele elemento:

<input id="botao" onclick="document.querySelector('#h1').classList.add('alterar')" type="button" value="Mudar de cor" />
                                                   ↑↑↑

Exemplo:

.alterar{ 
   color: red;
   text-align: justify;
}
<h1 id="h1"> texto qual quer </h1>
<input id="botao" onclick="document.querySelector('#h1').classList.add('alterar')" type="button" value="Mudar de cor" />

3

Deve colocar um id no h1:

<h1 id="texto> texto  </h1>

Adicionar um onclick no botão

<input id="botao" type="button"  onclick="trocarCor()"value="Mudar de cor "/>


E no javascript:

var titulo = document.getElementById('texto')

function trocarCor() {

     titulo.style.color = 'red'

     titulo.style.textAlign = 'justify'

}

3
  • Obrigado lvr7, ajudou bastante! 29/04/2019 às 0:02
  • lvr7 se for para deixar em negrito seria assim : texto.style.fontWeight = 'bold'; ?? 29/04/2019 às 0:37
  • Exato, pode usar as mesmas propriedades do css.
    – lvr7
    29/04/2019 às 14:11

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 .