JavaScriptを使用して実行時にCSSクラスを作成し、カスタムCSSファイルに書きたいとします。JavaScriptでカスタムCSSファイルのクラスを作成する方法は？
私はコードを書いて（下記参照）、自分のクラスを作成しましたが、CSSファイルでコードを作成する方法はわかりません。
var sheet = document.createElement('style')
sheet.innerHTML = ".context-menu-icon-case1:before{content: url(progressbar.png);}";
document.body.appendChild(sheet);それは私の現在のページでCSSクラスを作成しますが、私は、カスタムCSSファイルでそれを作成します。
あなたは、代わりにhtmlでファイルをロードするのXMLHttpRequest()またはfetch()を使用して、既存の.cssファイルを要求XMLHttpRequest.responseTextかresponse.text()で.cssファイルに新しいスタイルルールを追加、またはFileReaderを使用することができます。
は、作成されたファイルのobjectURL、data URIまたはエンコードされたテキストにstylesheetに設定rel属性を持つ<link>要素、href属性を作成し、既存のファイルに追加BlobまたはFileオブジェクト、または新規cssテキストのエンコードされたテキスト表現を作成します。 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>
@Motion更新された投稿を参照してください – guest271314
できません。ごめんなさい。良いニュースはあなたがする必要はありません。 JavascriptでCSSを挿入することは、CSSファイルから読み込むことと同じです。
あなただけのCSSファイル内のCSSクラスを記述し、このように、ジャバスクリプトによって実行時にCSSクラスを適用することができます。
html file:
<div id="test"></div>
css file:
.context-menu-icon-case1: {
color: xxx,
width: xxx
}
javascript file:
var ele = document.getElementById("test");
ele.className += "context-menu-icon-case1";
'：{'とCSSのコンマ区切りのプロパティは？また、 'className + ='を使用する場合は、最初に空白文字を指定するか、単に 'classList.add' –
を私は正確にはわかりませんあなたが言っていること。あなたはそれをサーバー上のCSSファイルに書き出したいのですか？ –
'.css'ファイルをローカルファイルシステムに書き込もうとしていますか？ – guest271314
@ guest271314私のCSSファイルは作成されていません。Javaスクリプトでランタイムにクラスを追加するだけです – Motion