热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《javascript可以对CSS进行自定义@rule吗?》经验,为你挑选了1个好方法。

CSS具有@ media,@ keyframes等规则。可以使用Javascript(例如@myCustomRule)来实现。如果是,那怎么办?如果没有,那么有没有其他选择或仅使用CSS?



1> skyline3000..:

虽然您无法创建自己的自定义@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;
}

推荐阅读
author-avatar
mobiledu2502889415
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有