How can you fill svg's in javascipt with document.getElementById

Question

Is there a way to fill SVG images with Javascript code, for example if you had a button with an id of myButton and you had a SVG inside it and used the document.getElementById("myButton").style to fill in the SVG, how could you do it? This is the code I tried:

document.getElementById("myButton").style.svg.fill="yellow";

user_14056648 · Answer

document.getElementById("Layer_1").style.fill="yellow";

you must target the svg element not the parent div.and write it like this.

user_5073281 · Answer

Get the SVG element and set the fill style.

let svg = document.getElementById("myButton").getElementsByTagName('svg')[0];
svg.style.fill = "yellow";

user_3260695 · Answer

document.getElementById('myButton').querySelector('svg').style.fill = 'yellow';

Or you can eliminate the call to getElementById

document.querySelector('#myButton  svg').style.fill = 'yellow';

user_13573444 · Answer

In this example, the color is assigned by clicking on the button. And you had a mistake - instead of style.svg.fill, you need to write style.fill.

var button_svg = document.querySelector("#myButton");

button_svg.onclick = function (){
   this.style.fill="yellow";
}

button {
    width: 100px;
}

It's toggle.

var button_svg = document.querySelector("#myButton");

button_svg.onclick = function (){
   this.classList.toggle('svg_yellow');;
}

button {
    width: 100px;
}

.svg_yellow {
    fill: yellow;
}

It's no click.

document.querySelector("#myButton").style.fill="yellow";

button {
    width: 100px;
}

How can you fill svg's in javascipt with document.getElementById

4 Answers