gpt4 book ai didi

javascript - 如何通过 JavaScript 在自定义 CSS 文件中创建类?

转载 作者:行者123 更新时间:2023-11-28 16:07:17 25 4
gpt4 key购买 nike

我想在运行时使用 JavaScript 创建一个 CSS 类并写入自定义 CSS 文件。

现在我编写了代码(见下文)并创建了我的类,但我不知道如何在我的 CSS 文件中创建它。

var sheet = document.createElement('style')
sheet.innerHTML = ".context-menu-icon-case1:before{content: url(progressbar.png);}";
document.body.appendChild(sheet);

它在我的当前页面中创建 CSS 类,但我想在自定义 css 文件中创建它。

最佳答案

您可以请求现有的.css文件使用 XMLHttpRequest()fetch()而不是在 html 加载文件, 将新样式规则附加到 .css文件在 XMLHttpRequest.responseTextresponse.text() ,或使用 FileReader .

创建一个 BlobFilecss 的对象或编码文本表示附加到现有文件的文本,创建一个 <link>带有 rel 的元素属性设置为 stylesheet , href属性为 objectURL , data URI或创建文件的编码文本,附加 link元素到 document.head .

<head>
<script>
var cssupdate = `.context-menu-icon-case1:before {
content: url(progressbar.png);
}`;
var cssfile = "style.css";
fetch(cssfile)
.then(response => response.text())
.then(currentcss => {
var css = currentcss + "\n" + `${cssupdate}`;
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "data:text/css," + encodeURIComponent(css);
document.querySelector("head").appendChild(link);
});
</script>
</head>

plnkr http://plnkr.co/edit/Gh0qR4CcQPROXCldX9OC?p=preview

关于javascript - 如何通过 JavaScript 在自定义 CSS 文件中创建类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38811052/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com