javascript可以对CSS进行自定义@rule吗？

Question

CSS具有@ media，@ keyframes等规则。可以使用javascript（例如@myCustomRule）来实现。如果是，那怎么办？如果没有，那么有没有其他选择或仅使用CSS？

Answer 1

虽然您无法创建自己的自定义@rules，但是可以使用CSSOM创建受支持的规则，并将其插入到使用JavaScript的浏览器样式表之一中：

button.addEventListener('click', function () {
  const sheets = document.styleSheets;
  const lastStyleSheet = sheets[sheets.length - 1];
  const rule = `@keyframes rotate {
                  0%  {
                    transform: rotate(0deg);
                  } 100% {
                    transform: rotate(360deg);
                  }
                }`;

  lastStyleSheet.insertRule(rule, lastStyleSheet.rules.length);
  box.classList.add('rotate');
});

#box {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

#box.rotate {
  animation: rotate 100ms infinite;
}

<div id="box"></div>
<button id="button">Add Animation via JS</button>