Get background-color from another element

Question

Get background-color from another element

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

It's annoying to always change the background color of several objects, I want to know if I can define the color of an object and then just match the color of the other with the color of that object, to get something dynamic, change the color of all at the same time being that in the code I only indicate the color in one. For example, I have a div.test set its color to blue .. how do I make other divs and other tags take the same color as div.test without having to leave assigning blue to all.

css3

asked by anonymous 06.02.2016 / 22:45

2 answers

Change variable when selecting another value in select in JS How to convert HTML to RTF?

score 2 · Answer 1

Using only CSS, I do not see any solution outside of the suggestions I've given in the comments: Use a class containing the specific rules that the element should have.

But I think it still would not be what you're looking for, it would not be dynamic, because CSS has no events and you will not be able to control the change in an element.

So, I would use Javascript to get the color of the element and assign it to others. The control of "who is the target element?" and "who are the elements that will be affected?" you can do with data attributes . For example:

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

Dynamic example

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

score 0 · Answer 2

You can try background-color:inherit set the background-color to the parent element and the child elements ... put this property so that they inherit the parent element. You can create a div with main and put other divs in, eg:

<div id="principal" style="background-color:#CCC">
  
  
  
  
  <div id="div1" style="background-color:inherit">
    
    
    </div>
  
  
  
  
  <div id="div2" style="background-color:inherit">
    
    
    </div>
  
   
  
  
  </div>

If u need only change the main div ... because the other would inherit the property, you can also do in css like this:

div[name=colorir]{

  background-color:#CCC;

}

Then just name the divs that want to change the background with the name coloring