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

YUI hat bei weitem die beste Stylesheet-Dienstprogramm die ich da draußen gesehen habe. Ich möchte Sie ermutigen, es zu überprüfen, aber hier ist ein Vorgeschmack:

// style element or locally sourced link element
var sheet = YAHOO.util.StyleSheet(YAHOO.util.Selector.query('style',null,true));

sheet = YAHOO.util.StyleSheet(YAHOO.util.Dom.get('local'));

// OR the id of a style element or locally sourced link element
sheet = YAHOO.util.StyleSheet('local');

// OR string of css text
var css = ".moduleX .alert { background: #fcc; font-weight: bold; } " +
          ".moduleX .warn  { background: #eec; } " +
          ".hide_messages .moduleX .alert, " +
          ".hide_messages .moduleX .warn { display: none; }";

sheet = new YAHOO.util.StyleSheet(css);

Es gibt natürlich noch andere, viel einfachere Möglichkeiten, den Stil zu ändern, wie die hier vorgeschlagenen. Wenn sie für Ihr Problem sinnvoll sind, sind sie vielleicht die beste Lösung, aber es gibt definitiv Gründe, warum die Änderung von CSS eine bessere Lösung ist. Der offensichtlichste Fall ist, wenn Sie eine große Anzahl von Elementen ändern müssen. Der andere wichtige Fall ist, wenn die Stiländerungen die Kaskade einbeziehen sollen. Die Verwendung des DOM zur Änderung eines Elements hat immer eine höhere Priorität. Es ist der Vorschlaghammer-Ansatz und entspricht der Verwendung der style Attribut direkt auf dem HTML-Element. Das ist nicht immer der gewünschte Effekt.

Answer 2

Hier ist Vishwanaths Lösung leicht umgeschrieben mit Kommentaren:

function setStyle(cssRules, aSelector, aStyle){
    for(var i = 0; i < cssRules.length; i++) {
        if(cssRules[i].selectorText && cssRules[i].selectorText.toLowerCase() == aSelector.toLowerCase()) {
            cssRules[i].style.cssText = aStyle;
            return true;
        }
    }
    return false;
}

function createCSSSelector(selector, style) {
    var doc = document;
    var allSS = doc.styleSheets;
    if(!allSS) return;

    var headElts = doc.getElementsByTagName("head");
    if(!headElts.length) return;

    var styleSheet, media, iSS = allSS.length; // scope is global in a function
    /* 1. search for media == "screen" */
    while(iSS){ --iSS;
        if(allSS[iSS].disabled) continue; /* dont take into account the disabled stylesheets */
        media = allSS[iSS].media;
        if(typeof media == "object")
            media = media.mediaText;
        if(media == "" || media=='all' || media.indexOf("screen") != -1){
            styleSheet = allSS[iSS];
            iSS = -1;   // indication that media=="screen" was found (if not, then iSS==0)
            break;
        }
    }

    /* 2. if not found, create one */
    if(iSS != -1) {
        var styleSheetElement = doc.createElement("style");
        styleSheetElement.type = "text/css";
        headElts[0].appendChild(styleSheetElement);
        styleSheet = doc.styleSheets[allSS.length]; /* take the new stylesheet to add the selector and the style */
    }

    /* 3. add the selector and style */
    switch (typeof styleSheet.media) {
    case "string":
        if(!setStyle(styleSheet.rules, selector, style));
            styleSheet.addRule(selector, style);
        break;
    case "object":
        if(!setStyle(styleSheet.cssRules, selector, style));
            styleSheet.insertRule(selector + "{" + style + "}", styleSheet.cssRules.length);
        break;
    }

Answer 3

Ab IE 9. Sie können nun eine Textdatei laden und eine style.innerHTML-Eigenschaft festlegen. Im Wesentlichen können Sie jetzt eine CSS-Datei über Ajax laden (und den Rückruf erhalten) und dann einfach den Text innerhalb eines Style-Tags wie folgt festlegen.

Dies funktioniert auch in anderen Browsern, ich weiß nicht, wie weit zurück. Aber solange Sie nicht brauchen, um IE8 zu unterstützen, dann würde es funktionieren.

// RESULT: doesn't work in IE8 and below. Works in IE9 and other browsers.
$(document).ready(function() {
    // we want to load the css as a text file and append it with a style.
    $.ajax({
        url:'myCss.css',
        success: function(result) {
            var s = document.createElement('style');
            s.setAttribute('type', 'text/css');
            s.innerHTML = result;
            document.getElementsByTagName("head")[0].appendChild(s);
        },
        fail: function() {
            alert('fail');
        }
    })
});

und dann können Sie eine externe Datei wie die myCss.css ziehen lassen

.myClass { background:#F00; }

Answer 4

https://jsfiddle.net/xk6Ut/256/

Eine Möglichkeit zur dynamischen Erstellung und Aktualisierung von CSS-Klassen in JavaScript:

• Verwenden von Style Element zum Erstellen eines CSS-Abschnitts
• Verwendung einer ID für das Stilelement, damit wir das CSS aktualisieren können
  Klasse

.....

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) 
             document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

    var cssText = '.testDIV{ height:' + height + 'px !important; }';
    writeStyles('styles_js', cssText)

Answer 5

Mit google closure:

können Sie einfach das ccsom-Modul verwenden:

goog.require('goog.cssom');
var css_node = goog.cssom.addCssText('.cssClass { color: #F00; }');

Der Javascript-Code versucht, browserübergreifend zu sein, wenn er den CSS-Knoten in den Dokumentenkopf setzt.