change color of page components

Asked

Viewed 70 times

-1

Hello I’m looking for a way to do this. I have this code below... and I want a button that changes the colors of the elements in it, type the background color, font color, track background color. It would be a change what the user himself will do, he chooses the color he wants in each element. If there is a way to do it without using java it would be good but if it is only with java even is good also because so I learn more kkk

body {
    background-color: #2f45d6;  
}
h1 {
    background-color: #a30000;
  color: #fffb00;
  padding: 15px; 
  text-align: center;
}
<body>

<h1>ola mundo!</h1>

</body>

javascript html css background-color

  • Your question was not clear, you want to click on the red box put a color you choose, then you want to click on the text and choose another color etc... that’s it?

  • I wanted to do with preset colors as for example: it would have a square that is divided into 3 colors (blue, yellow and red) and when the user clicks on that square the background is blue, the yellow band and the red letter. It lasts a 3-4 squares of the same type with different colors that when clicked changes the colors of the background, the track and the letter in the colors that are in the frame. It’s like choosing a theme in an IDE for example, that instead of swapping component for component and already brings a color preset of each component in just one click

1 answer

1

I think you can do something like this Adding color input and javascript. I only made it for H1 but then you can go adapting to the other elements.

document.getElementById("colormenu").oninput=function(){
  document.getElementsByTagName("h1")[0].style.color=this.value;
}
body {
  background-color: #2f45d6;  
}
h1 {
  background-color: #a30000;
  color: #fffb00;
  padding: 15px; 
  text-align: center;
}
<h1>ola mundo!</h1>
<input type="color" id="colormenu">

EDIT With boot would look something like this, since you have the colors pre defined

document.getElementById("color").onclick=function(){
  document.getElementsByTagName("body")[0].style="background-color:red";
  document.getElementsByTagName("h1")[0].style="background-color:yellow";
  document.getElementsByTagName("h1")[0].style.color="blue";
}

  • It would be almost exactly that however I wanted to do with predefined colors as for example: it would have a square that is divided into 3 colors (blue, yellow and red) and when the user clicks on that square the background is blue, the yellow band and the red letter. It lasts a 3-4 squares of the same type with different colors that when clicked changes the colors of the background, the track and the letter in the colors that are in the frame. It’s like choosing a theme in an IDE for example, that instead of swapping component for component and already brings a color preset of each component in just one click

  • Then the idea is the same. You will have the buttons there instead of onnput you use the onclick and change the color as you want. If I can later I edit the reply.

  • It would not be better to have a conditional structure, like "if you click on this one, the elements will be of one color, if you click on the other they will be of another color". Because I want to put a choice for the user to put a predefined choice.

  • I edited the answer see if this is it.

Browser other questions tagged javascript html css background-color

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