Wie kann man eine CSS-Klasse in JavaScript dynamisch erstellen und anwenden?

Question

Ich muss eine CSS-Stylesheet-Klasse dynamisch in JavaScript erstellen und sie einigen HTML-Elementen wie div, table, span, tr, etc. und einigen Steuerelementen wie asp:Textbox, Dropdownlist und datalist zuweisen.

Ist das möglich?

Es wäre schön, wenn eine Probe dabei wäre.

Answer 1

Ein interessantes Projekt, das Ihnen bei Ihrer Aufgabe helfen könnte, ist JSS .

JSS ist ein Autorentool für CSS, mit dem Sie JavaScript verwenden können, um Stile auf deklarative, konfliktfreie und wiederverwendbare Weise zu beschreiben. Es kann im Browser, serverseitig oder zur Erstellungszeit in Node kompiliert werden.

Die JSS-Bibliothek ermöglicht die Injektion in den DOM/Kopfbereich unter Verwendung der .attach() Funktion.

Online-Version wiederholen zur Bewertung.

Weitere Informationen über JSS .

Ein Beispiel:

// Use plugins.
jss.use(camelCase())

// Create your style.
const style = {
  myButton: {
    color: 'green'
  }
}

// Compile styles, apply plugins.
const sheet = jss.createStyleSheet(style)

// If you want to render on the client, insert it into DOM.
sheet.attach()

Answer 2

Ich habe mir einige der Antworten hier angesehen und konnte nichts finden, das automatisch ein neues Stylesheet hinzufügt, wenn es keine gibt, und wenn nicht, einfach ein vorhandenes ändert, das bereits den benötigten Stil enthält, also habe ich eine neue Funktion erstellt (sollte in allen Browsern funktionieren, obwohl nicht getestet, verwendet addRule und außerdem nur grundlegendes natives JavaScript, lassen Sie mich wissen, ob es funktioniert):

function myCSS(data) {
    var head = document.head || document.getElementsByTagName("head")[0];
    if(head) {
        if(data && data.constructor == Object) {
            for(var k in data) {
                var selector = k;
                var rules = data[k];

                var allSheets = document.styleSheets;
                var cur = null;

                var indexOfPossibleRule = null,
                    indexOfSheet = null;
                for(var i = 0; i < allSheets.length; i++) {
                    indexOfPossibleRule = findIndexOfObjPropInArray("selectorText",selector,allSheets[i].cssRules);
                    if(indexOfPossibleRule != null) {
                        indexOfSheet = i;
                        break;
                    }
                }

                var ruleToEdit = null;
                if(indexOfSheet != null) {

                    ruleToEdit = allSheets[indexOfSheet].cssRules[indexOfPossibleRule];

                } else {
                    cur = document.createElement("style");
                    cur.type =  "text/css";
                    head.appendChild(cur);
                    cur.sheet.addRule(selector,"");
                    ruleToEdit = cur.sheet.cssRules[0];
                    console.log("NOPE, but here's a new one:", cur);
                }
                applyCustomCSSruleListToExistingCSSruleList(rules, ruleToEdit, (err) => {
                    if(err) {
                        console.log(err);
                    } else {
                        console.log("successfully added ", rules, " to ", ruleToEdit);
                    }
                });
            }
        } else {
            console.log("provide one paramter as an object containing the cssStyles, like: {\"#myID\":{position:\"absolute\"}, \".myClass\":{background:\"red\"}}, etc...");
        }
    } else {
        console.log("run this after the page loads");
    }

};  

dann fügen Sie einfach diese 2 Hilfsfunktionen entweder innerhalb der obigen Funktion oder an einer anderen Stelle ein:

function applyCustomCSSruleListToExistingCSSruleList(customRuleList, existingRuleList, cb) {
    var err = null;
    console.log("trying to apply ", customRuleList, " to ", existingRuleList);
    if(customRuleList && customRuleList.constructor == Object && existingRuleList && existingRuleList.constructor == CSSStyleRule) {
        for(var k in customRuleList) {
            existingRuleList["style"][k] = customRuleList[k];
        }

    } else {
        err = ("provide first argument as an object containing the selectors for the keys, and the second argument is the CSSRuleList to modify");
    }
    if(cb) {
        cb(err);
    }
}

function findIndexOfObjPropInArray(objPropKey, objPropValue, arr) {
    var index = null;
    for(var i = 0; i < arr.length; i++) {
        if(arr[i][objPropKey] == objPropValue) {
            index = i;
            break;
        }
    }
    return index;
}

(Beachten Sie, dass ich in beiden Fällen eine for-Schleife anstelle von .filter verwende, da die CSS-Stil-/Regel-Listenklassen nur eine Längeneigenschaft und keine .filter-Methode haben).

Dann rufen Sie es an:

myCSS({
    "#coby": {
        position:"absolute",
        color:"blue"
    },
    ".myError": {
        padding:"4px",
        background:"salmon"
    }
})

Lassen Sie mich wissen, ob es bei Ihrem Browser funktioniert oder ob ein Fehler auftritt.

Answer 3

Hier ist meine modulare Lösung:

var final_style = document.createElement('style');
final_style.type = 'text/css';

function addNewStyle(selector, style){
  final_style.innerHTML += selector + '{ ' + style + ' } \n';
};

function submitNewStyle(){
  document.getElementsByTagName('head')[0].appendChild(final_style);

  final_style = document.createElement('style');
  final_style.type = 'text/css';
};

function submitNewStyleWithMedia(mediaSelector){
  final_style.innerHTML = '@media(' + mediaSelector + '){\n' + final_style.innerHTML + '\n};';
    submitNewStyle();
};

Das können Sie im Grunde überall in Ihrem Code tun:
addNewStyle('body', 'color: ' + color1); , wobei color1 ist eine definierte Variable.

Wenn Sie die aktuelle CSS-Datei "posten" wollen, machen Sie einfach submitNewStyle() ,
und Sie können später immer noch weitere CSS hinzufügen.

Wenn Sie es mit "Medienabfragen" hinzufügen möchten, haben Sie die Möglichkeit dazu.
Nach "addingNewStyles" verwenden Sie einfach submitNewStyleWithMedia('min-width: 1280px'); .

---

Es war ziemlich nützlich für meinen Anwendungsfall, da ich das CSS der öffentlichen (nicht meiner) Website entsprechend der aktuellen Zeit geändert habe. Ich übermittle eine CSS-Datei, bevor ich "aktive" Skripte verwende, und den Rest danach (damit die Website so aussieht, wie sie aussehen sollte, bevor ich auf Elemente über querySelector ).

Answer 4

Nach Durchsicht der Antworten fehlt das Offensichtlichste und Einfachste: Verwenden Sie document.write() um einen Teil des benötigten CSS auszuschreiben.

Hier ist ein Beispiel (siehe Codepen: http://codepen.io/ssh33/pen/zGjWga ):

<style>
   @import url(http://fonts.googleapis.com/css?family=Open+Sans:800);
   .d, body{ font: 3vw 'Open Sans'; padding-top: 1em; }
   .d {
       text-align: center; background: #aaf;
       margin: auto; color: #fff; overflow: hidden; 
       width: 12em; height: 5em;
   }
</style>

<script>
   function w(s){document.write(s)}
   w("<style>.long-shadow { text-shadow: ");
   for(var i=0; i<449; i++) {
      if(i!= 0) w(","); w(i+"px "+i+"px #444");
   }
   w(";}</style>");
</script> 

<div class="d">
    <div class="long-shadow">Long Shadow<br> Short Code</div>
</div>

Answer 5

Für die Suchenden; wenn Sie jQuery verwenden, können Sie Folgendes tun:

var currentOverride = $('#customoverridestyles');

if (currentOverride) {
 currentOverride.remove();
}

$('body').append("<style id=\"customoverridestyles\">body{background-color:pink;}</style>");

Natürlich können Sie das innere CSS so ändern, wie Sie wollen.

Ich weiß, dass einige Leute reines JavaScript bevorzugen, aber es funktioniert und ist ziemlich robust für das dynamische Schreiben/Überschreiben von Stilen.