É chato ficar sempre alterando a cor de background de varios objetos, quero saber se tem como eu definir a cor de um objeto e depois so igualar a cor dos outros com a cor desse objeto, para ficar algo dinamico, alterar a cor de todos ao mesmo tempo sendo que no código so indico a cor em um. Exemplo, tenho uma div.teste defino sua cor como blue.. como faço outras divs e outras tag pegarem a mesma cor de div.teste sem ter que sair atribuindo blue para todos.
-
Você pode utilizar uma classe em todos esses elementos, seleciona-los com JavaScript e mudar o background-color de todos eles numa taca só, seria isso?– Zignd6/02/2016 às 21:51
-
no caso é só no css mesmo, pq ainda não defini a cor final, não tem como aplicar sem ser em uma classe nova? assim como expliquei na pergunta.– Leonardo6/02/2016 às 22:03
-
1Bem você pode começar a usar SASS ou LESS, que basicamente são linguagens pré-processadas de CSS, com elas você cria scripts que após rodar gera o CSS pronto, com isso você pode usar variáveis e outras coisas que existem, nas linguagens de programação.– SK156/02/2016 às 22:05
-
Não tem como, as classes são estáticas, você não pode altera-las depois do carregamento da página. O único jeito seria utilizando JavaScript, alterando o estilo dos elementos através do atributo style.– Zignd6/02/2016 às 22:08
-
@SK15 não entendo como SASS ou LESS poderia ajudar nesse caso, o CSS será gerado da mesma forma e ele quer alterar o background-color em tempo de execução.– Zignd6/02/2016 às 22:10
2 Respostas
Utilizando somente CSS, não vejo nenhuma solução fora as sugestões que deram nos comentários: Utilizar uma classe contendo as regras específicas que o elemento deve ter.
Mas acho que ainda assim não seria o que está buscando, não seria dinâmico, até porque CSS não possui eventos e você não conseguirá controlar o "change" em um elemento.
Então, eu utilizaria Javascript para obter a cor do elemento e atribuir aos outros. O controle de "quem é o elemento alvo?" e "quem são os elementos que serão afetados?" dá para fazer com data attributes. Por exemplo:
(function(){
var backgroundColor = document.querySelector('[data-parent]').style.backgroundColor,
targets = document.querySelectorAll('[data-target]');
for(var i = 0; i < targets.length; i++)
targets[i].style.backgroundColor = backgroundColor;
})();
<div data-parent style='background-color:blue'>Eu sou azul :)</div>
<hr>
<div data-target>Eu serei afetado.</div>
<div data-target>Eu também.</div>
<div>Eu não.</div>
<div data-target>Eu sim.</div>
Exemplo dinâmico
(function(){
document.querySelector('button').addEventListener('click', function(){
setRandomParentColor(); // Altera a cor do 'data-parent'
setTargetsColors(getParentColor()); // Pega a cor do elemento e altera todos os 'data-target'
});
/**
* Gera uma cor randomica e altera a cor de backgroundd
* do elemento com atributo 'data-parent'.
*
* créditos - @ZPiDER: http://stackoverflow.com/a/5365036/4056678
*/
function setRandomParentColor(){
var color = "#"+((1<<24)*Math.random()|0).toString(16); // cor "randomica"
document.querySelector('[data-parent]').style.backgroundColor = color;
}
/**
* Obtém a cor do elemento com atributo 'data-parent'.
*/
function getParentColor(){
return document.querySelector('[data-parent]').style.backgroundColor;
}
/**
* Altera a cor de background de todos os elementos
* com atributo 'data-target'.
*/
function setTargetsColors(color){
var targets = document.querySelectorAll('[data-target]'),
len = targets.length;
for(var i = 0; i < len; i++)
targets[i].style.backgroundColor = color;
}
setTargetsColors(getParentColor());
})();
<div data-parent style='background-color:blue'>Eu sou azul :)</div>
<button>Mudar cor</button>
<hr>
<div data-target>Eu serei afetado.</div>
<div data-target>Eu também.</div>
<div>Eu não.</div>
<div data-target>Eu sim.</div>
<div>Eu também não.</div>
Você pode tentar usar background-color:inherit
defina o background-color para o elemento pai...e nos elementos filhos coloque essa propriedade para que eles herdem do elemento pai.
Você pode criar uma div com principal e colocar outras divs dentro, ex:
<div id="principal" style="background-color:#CCC">
<div id="div1" style="background-color:inherit">
</div>
<div id="div2" style="background-color:inherit">
</div>
</div>
No caso vc precisaria alterar apenas a div principal...pois as outras herdariam a propriedade, voce tambem pode fazer em css dessa forma:
div[name=colorir]{
background-color:#CCC;
}
Entao basta nomear as divs que deseja mudar o background com o nome colorir
-
1