Wie erstellt man eine Klasse in einer benutzerdefinierten CSS-Datei mit JavaScript?

-1

Ich möchte eine CSS-Klasse zur Laufzeit mit JavaScript erstellen und in eine benutzerdefinierte CSS-Datei schreiben.Wie erstellt man eine Klasse in einer benutzerdefinierten CSS-Datei mit JavaScript?

Jetzt habe ich den Code geschrieben (siehe unten) und meine Klasse erstellt, aber ich weiß nicht, wie ich es in meiner CSS-Datei erstellen soll.

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

Es schafft die CSS-Klasse in meiner aktuellen Seite, aber ich mag es in einer Datei benutzerdefinierte CSS erstellen.

Quelle

2016-08-07 Motion

Ich bin mir nicht ganz sicher, was du sagst. Meinst du, du willst es in eine CSS-Datei auf dem Server schreiben? –

Versuchen Sie eine '.css' Datei in das lokale Dateisystem zu schreiben? – guest271314

@ guest271314 nein meine CSS-Datei vor dem Erstellen Ich möchte nur eine Klasse anfügen als Laufzeit von Java-Skript – Motion

Sie können die vorhandene .css Datei anfordern XMLHttpRequest() oder fetch() statt Laden der Datei in html, hängen Sie den neuen Stil der Regel auf die bei XMLHttpRequest.responseText oder response.text() oder mit .css Datei FileReader verwenden.

erstellen Blob oder File Objekt oder codierte Textdarstellung neuen css Text bestehende Datei angehängt, schafft ein <link> Element mit rel Attribute auf stylesheet, href Attribut zu einem objectURL, data URI oder codierten Text der erstellten Datei, Hängen Sie das link Element an document.head an.

<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

Quelle

2016-08-07 05:52:35 guest271314

@Motion Siehe aktualisierten Beitrag – guest271314

Sie können nicht. Es tut mir leid. Gute Nachrichten brauchen Sie nicht. Das Einfügen von CSS über Javascript entspricht dem Lesen aus einer CSS-Datei.

Quelle

2016-08-07 05:09:35

-1

Sie können nur eine CSS-Klasse in CSS-Datei, schreiben und dann die CSS-Klasse zur Laufzeit durch Javascript gelten, wie folgt aus:

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";

Quelle

2016-08-07 06:49:25 Veetase

': {' und Komma-getrennte Eigenschaften in CSS? Wenn Sie 'className + =' verwenden, sollten Sie zuerst ein Leerzeichen angeben oder einfach 'classList.add' verwenden –

Wie erstellt man eine Klasse in einer benutzerdefinierten CSS-Datei mit JavaScript?

Antwort

Verwandte Themen