JS - Copy colour value to another elements-CodePudding

I'm trying to copy the color value from the <h1> element to <path> elements.

<div id='my_id'>
<h1 style='color:orange'>What What</h1>
<div id='my_element'>

<svg>

<path d="M10 10"></path>
<path d="M10 10"></path>
<path d="M10 10"></path>

</svg>

</div>
</div>

mycolor_element = document.querySelectorAll('#my_id h1')[0]; 
let my_value = window.getComputedStyle(mycolor_element).color;
document.querySelectorAll('#my_element svg path')[0].style.fill = my_value;

I expect that if my <h1> is orange then my <path>s are also orange.

CodePudding user response：

You can use querySelector (if is just one element) with window.getComputedStyle for catch color of element then set it to the svg like:

const mycolor_element = window.getComputedStyle(document.querySelector('#my_id > h1')).color;

document.querySelectorAll('#my_element > svg > path').forEach(el => el.style.fill = mycolor_element);

h1 {
  color: orange
}

<div id='my_id'>
  <h1 style='color:orange'>What What</h1>
  <div id='my_element'>

    <svg>

<path fill="rgb(0,0,0)" fill-opacity="1" d=" M44.11800003051758,-5.190000057220459 C44.11800003051758,-5.190000057220459 44.11800003051758,5.190000057220459 44.11800003051758,5.190000057220459 C44.11800003051758,5.190000057220459 -44.11800003051758,5.190000057220459 -44.11800003051758,5.190000057220459 C-44.11800003051758,5.190000057220459 -44.11800003051758,-5.190000057220459 -44.11800003051758,-5.190000057220459 C-44.11800003051758,-5.190000057220459 44.11800003051758,-5.190000057220459 44.11800003051758,-5.190000057220459z"></path><path fill="rgb(0,0,0)" fill-opacity="1" d=" M44.11800003051758,-5.190000057220459 C44.11800003051758,-5.190000057220459 44.11800003051758,5.190000057220459 44.11800003051758,5.190000057220459 C44.11800003051758,5.190000057220459 -44.11800003051758,5.190000057220459 -44.11800003051758,5.190000057220459 C-44.11800003051758,5.190000057220459 -44.11800003051758,-5.190000057220459 -44.11800003051758,-5.190000057220459 C-44.11800003051758,-5.190000057220459 44.11800003051758,-5.190000057220459 44.11800003051758,-5.190000057220459z"></path>

</svg>

  </div>
</div>

CodePudding user response：

You can simplify this task by applying a fill:currentColor property value to your <path> elements:

path{
  fill:currentColor;
}

This way all paths can inherit the fill color from the parent element's (text) color property:

let h1 = document.querySelector('#my_id h1'); 
let h1Color = window.getComputedStyle(h1).color;
let svgWrap = document.getElementById('svgWrap');

svgWrap.style.color = h1Color;

.colorOrange{
  color:orange
}

.svgCurrentColor path{
  fill:currentColor;
}

<div class='colorOrange'>
  <h1>Inherit color via css</h1>
  <div class='svgWrap'>
    <svg >
      <path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
      <path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
      <path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
    </svg>
  </div>
</div>


<div id='my_id'>
  <h1 style="color:purple">Inherit color via js</h1>
  <div id='svgWrap' >
    <svg >
      <path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 0 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
      <path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 15 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
      <path fill="rgb(0,0,0)" fill-opacity="1" d=" m 44 30 c 0 0 0 10 0 10 c 0 0 -88 0 -88 0 c 0 0 0 -10 0 -10 c 0 0 88 0 88 0 z" />
    </svg>

  </div>
</div>

So you might not need any javaScript at all.

CodePudding user response：

 document.querySelectorAll

This method is not used to select one element only. Use the

document.querySelector

method instead.