Codigo js randômico para uso no css

[eduardodsilvaq 0]

Comecei um template de cores e estilos dinâmicos. Comecei fazendo um script php simples somente para teste:

<?php
$color = mt_rand(1, 3);
if ($color == 1){
    $colora = "#3CB371"; $colorb = "#FFFFF0"; $colorc = "#8ad1aa";  $colord = "#27754a";  $colore = "#339860";
}
if ($color == 2){
     $colora = "#B22222"; $colorb = "#FFFFF0"; $colorc = "#d17a7a";  $colord = "#741616";  $colore = "#971d1d";
}
if ($color == 3){
    $colora = "#9932CC"; $colorb = "#FFFFF0"; $colorc = "#c284e0";  $colord = "#642185";  $colore = "#822bae";
}
?>
<style type="text/css">
::-webkit-scrollbar-thumb {
  background:<?php echo $colora ;?>;
  border: 0px none <?php echo $colora ;?>;
}
.headercon {
    margin: auto;
    width: 100%;
    height:360px;
    background-color:<?php echo $colorc; ?>;
    box-shadow: 0px 0px 25px ;
}
.headerslider {
    margin: auto;
    width: 100%;
    background-color:<?php echo $colore; ?>;
}
</style>

Agora quero fazer o mesmo no javascript porem nao esta dando certo. Estou atualmente tentando usar isso:

<style type="text/css">
::-webkit-scrollbar-thumb {
}
.headercon {
	margin: auto;
	width: 100%;
  	height:360px;
	box-shadow: 0px 0px 25px ;
}
.headerslider {
	margin: auto;
	width: 100%;
}
</style>
<script>
 var num = Math.floor(Math.random() * 3 + 1);
 if (num = '1') {
 var type = "1"; var colora = "#3CB371"; var colorb = "#FFFFF0"; var colorc = "#8ad1aa";  var colord = "#27754a";  var colore = "#339860";
}
if (num = '2') {
 var type = "2"; var colora = "#B22222"; var colorb = "#FFFFF0"; var colorc = "#d17a7a";  var colord = "#741616";  var colore = "#971d1d";
}
if (num = '3') {
 var type = "3"; var colora = "#9932CC"; var colorb = "#FFFFF0"; var colorc = "#c284e0";  var colord = "#642185";  var colore = "#822bae";
}
var div = document.getElementsByClassName('headercon');
div.style.background = var colorc;
var div = document.getElementsByClassName('headerslider');
div.style.background = var colorc;
</script>

No caso do "::-webkit-scrollbar-thumb" no js eu nao tenho ideia de como faz pra fazer.

[wanderval 19]

quando você usa:

 

document.getElementsByClassName

você tem o retorno de um array então por isso estava ocorrendo erro na linha, já que o array não possui a propriedade "style":

div.style.background

a solução foi pegar o primeiro elemento retornado na posição [0]:

 

var div = document.getElementsByClassName('headercon')[0];
div.style.background = colorc;
var div = document.getElementsByClassName('headerslider')[0];
div.style.background = colorc;

ex: https://jsbin.com/dekajukezo/edit?html,css,js,console,output

[Maujor 144]

@eduardodsilvaq

Solução com ES6

Essa solução motivou um post no meu FaceBook

 

[Marcos_imasters 288]

3 horas atrás, Maujor disse:

@eduardodsilvaq

Solução com ES6

Essa solução motivou um post no meu FaceBook

 

ficou show. ja pensou em usar exemplo?

:root {
  --tema: #2c2d3a;
 }

[Maujor 144]

retirado

[Marcos_imasters 288]

55 minutos atrás, Maujor disse:

@Marcos_imasters
Não tinha pensado não, mas é uma excelente ideia.
Vá em frente, crie uma versão com variáveis CSS e poste o link aqui.

veja amigo.

 

https://jsfiddle.net/aurasistemas/dny1Lj7q/

[Maujor 144]

@Marcos_imasters