Well yes, you can change the image’s width using CSS, just like any HTML image:
Assuming your image has a class of svg
:
<img src="check-box.svg" class="svg">
Your CSS can be something like:
.svg {
width: 0.9em;
height: auto;
}
Well yes, you can change the image’s width using CSS, just like any HTML image:
Assuming your image has a class of svg
:
<img src="check-box.svg" class="svg">
Your CSS can be something like:
.svg {
width: 0.9em;
height: auto;
}
HTML:
<a id="showAll"><img srcset="check-box.svg" width="10" height="10"></a>
<a id="showName"><img srcset="empty-box.svg" width="10" height="10"></a>
JS:
document.querySelector('#showAll').onclick = function () {
document.querySelector('#showName').innerHTML = '<img srcset="check-box.svg" width="10" height="10">';
};
So when clicking the ShowAll element, the ShowName element will have the same icon as ShowAll
Code works but what I want is to:
1) simplify the <img srcset="check-box.svg" width="10" height="10">
inside the js file. Can I do it in css instead of having this long string in JS?
2) if css is ok, the ideal size of that icon should be “0.9em”, not “10” – javascript doesnt seem to read 0.9em
I’m a JS noob, sorry if this is trivial 🙁
Questions related to working code, with requests for refactoring advice, should be made on