Good people! I have a button with 5 buttons, when clicking these buttons, the color of the site will change, I was making this process to change the color in Javascript, but I do not think very feasible ... What better way to do this? Make 5 copies of the original css document thus only changing colors and doing trigger with js? What's the best way to do this, guys?
Change the color of the site in a click of a button!
1
asked by anonymous 14.05.2018 / 23:44
2 answers
1
I think the best thing to do would be to create classes for each color (eg, dark, light, default) and when clicking the button changes only the class of the parent element, the rest is already defined inside.
ex:
var dark = document.getElementById('btnDark');
var light = document.getElementById('btnLight');
var initial = document.getElementById('btnInitial');
var body = document.querySelector('body');
dark.onclick = function(){
body.className = "dark";
}
light.onclick = function(){
body.className = "light";
}
initial.onclick = function(){
body.className = "";
}.dark{
background:#000;
color:#fff;
}
.light{
background:#fff;
color:#4b4b4b;
}<body>
<h2>Lorem Ipsum é simplesmente</h2>
<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica.</p>
<button id="btnDark">Dark</button>
<button id="btnLight">Light</button>
<button id="btnInitial">Default</button>
</body>Use sass to create classes, it would make it much easier.
PS: In the example above I did not use any libraries.
15.05.2018 / 13:52
0
With Jquery :
<button id="red">Vermelho</button>
<button id="green">Verde</button>
<button id="blue">Azul</button>
<script type="text/javascript">
$('button').click(function(){
$('body').css('background-color',$(this).attr('id'));
});
</script>
15.05.2018 / 00:08