作者:mobiledu2502889415 | 来源:互联网 | 2022-10-11 13:23
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;
}