javascript - 在 insertRule javascript 语句中格式化字符串

Question

我希望使用 insertRule 通过 Javascript 更改导航元素的 :hover 样式。导航链接的背景颜色将根据 bgndImgIndex 发生变化。这可以用 Javascript 实现还是我完全错了？

var bgndImgIndex = 0;
var colorSelect = ['#ffa800', '#ba2a2a', '#5ad339'];

var sheet = document.styleSheets[0];

sheet.insertRule("a:hover {background:{0} !important".format(colorSelect[bgndImgIndex]), 4);

Answer 1

这完全有可能。问题似乎是 .format 在 JS 的 String 原型(prototype)上不存在。我通常在 JS 中使用 ES6 模板字符串来完成这个任务，请看工作示例:

var bgndImgIndex = 0;
var colorSelect = ['#ffa800', '#ba2a2a', '#5ad339'];

var sheet = document.styleSheets[0];

sheet.insertRule(
  `a:hover {background:${colorSelect[bgndImgIndex]} !important`
);

<a>Test</a>