javascript - 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>