Change the color of the text by clicking a button

Asked

Viewed 9,207 times

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>

I am making a basic html page and I need to make the text red and justified when clicking a button.

someone can help ?

html css

  • Put what you already have of code there. It is to be only with HTML and CSS or you can use script?

  • I put, yes you can use script

5 answers

13

An html and css only option is using the selector ~ with him when the checkbox is checked you change the color to text and change the alignment.

Here you can read more about this adjacent selector combiner ~ https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

OBS: If you want to hide the checkbox put in the ID his display:none, ai vc click only on the text of 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>

  • 1

    Thank you Ugo, you helped a lot!

  • @Diogoserravalle No problem my dear, I’m happy to have helped

5

Good evening Diogo, there are several ways to do this: The simplest I imagine would be creating a function in Java that changes the color of the text in this way and calls it in 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>

It is possible to do this without changing the html of your page, just by adding a mouse (listener) to the button, in javascript. Thus:

<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>

  • Thanks Rafael helped a lot, if I need to create another button but in this other one the formatting is: identado 20px only in the first line , size 130% and bold as staying in the script ?

4

One way to use a button and swap the text of the div is to use the pseudo-element :target and place an element a inside the button and manipulate the div by your 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>

This way only works when clicking once, if you want to click again the text with initial style, the most recommended is how Hugo used checkbox

4

You can use the method .classList.add('nome da classe') which will add the class .alterar to the selected element when the button is clicked. You can place the code inside an attribute onclick:

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

It is worth noting that the document.querySelector('h1') will select only the first element h1 what to find. Therefore, if you have more than one <h1> on the page, you will need to identify it with a specific id for that element by inserting an attribute id:

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

And put the id of the element of document.querySelector so that the click on the button is directed only to that element:

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

Example:

.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

You must put an id on H1:

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

Add an onclick to the button

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

And in javascript:

var titulo = document.getElementById('texto')

function trocarCor() {

     titulo.style.color = 'red'

     titulo.style.textAlign = 'justify'

}

  • Thanks lvr7, it helped a lot!

  • lvr7 if it is to leave in bold would look like : text.style.fontWeight = 'Bold'; ??

  • Exact, you can use the same css properties.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.