在Webkit(Safari/Chrome)浏览器中动态加载CSS规则,可以通过以下方法实现:
<style>
标签。<style>
标签的textContent
属性中。<style>
标签添加到页面的<head>
标签中。以下是一个简单的示例:
function addCSSRule(rule) {
const style = document.createElement('style');
style.textContent = rule;
document.head.appendChild(style);
}
// 使用示例
addCSSRule('body { background-color: red; }');
在这个示例中,我们定义了一个名为addCSSRule
的函数,该函数接受一个CSS规则作为参数,并创建一个新的<style>
标签,将规则添加到标签的textContent
属性中,并将其添加到页面的<head>
标签中。
这种方法可以在Webkit(Safari/Chrome)浏览器中动态地将CSS规则添加到页面中,而无需依赖任何第三方库或框架。
领取专属 10元无门槛券
手把手带您无忧上云