javascript - 如何简化 JavaScript 中的 SVG 链接？

Question

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">';
};

因此，当单击 ShowAll 元素时，ShowName 元素将具有与 ShowAll 相同的图标

代码可以工作，但我想要的是:

1) 简化<img srcset="check-box.svg" width="10" height="10"> js文件里面。我可以在 css 中完成它，而不是在 JS 中使用这么长的字符串吗？

2) 如果 css 没问题，该图标的理想大小应该是“0.9em”，而不是“10” - javascript 似乎无法读取 0.9em

我是一个 JS 菜鸟，如果这是微不足道的，抱歉:(

Answer 1

是的，您可以使用 CSS 更改图像的宽度，就像任何 HTML 图像一样:

假设您的图像具有 svg 类:

<img src="check-box.svg" class="svg">

你的 CSS 可以是这样的:

.svg {
    width: 0.9em;
    height: auto;
}