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

Hier ist eine Möglichkeit:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

Answer 2

Ich habe eine bessere Lösung gefunden, die funktioniert in allen Browsern.
Verwendet document.styleSheet, um Regeln hinzuzufügen oder zu ersetzen. Angenommene Antwort ist kurz und handlich, aber dies funktioniert über IE8 und weniger zu.

function createCSSSelector (selector, style) {
  if (!document.styleSheets) return;
  if (document.getElementsByTagName('head').length == 0) return;

  var styleSheet,mediaType;

  if (document.styleSheets.length > 0) {
    for (var i = 0, l = document.styleSheets.length; i < l; i++) {
      if (document.styleSheets[i].disabled) 
        continue;
      var media = document.styleSheets[i].media;
      mediaType = typeof media;

      if (mediaType === 'string') {
        if (media === '' || (media.indexOf('screen') !== -1)) {
          styleSheet = document.styleSheets[i];
        }
      }
      else if (mediaType=='object') {
        if (media.mediaText === '' || (media.mediaText.indexOf('screen') !== -1)) {
          styleSheet = document.styleSheets[i];
        }
      }

      if (typeof styleSheet !== 'undefined') 
        break;
    }
  }

  if (typeof styleSheet === 'undefined') {
    var styleSheetElement = document.createElement('style');
    styleSheetElement.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(styleSheetElement);

    for (i = 0; i < document.styleSheets.length; i++) {
      if (document.styleSheets[i].disabled) {
        continue;
      }
      styleSheet = document.styleSheets[i];
    }

    mediaType = typeof styleSheet.media;
  }

  if (mediaType === 'string') {
    for (var i = 0, l = styleSheet.rules.length; i < l; i++) {
      if(styleSheet.rules[i].selectorText && styleSheet.rules[i].selectorText.toLowerCase()==selector.toLowerCase()) {
        styleSheet.rules[i].style.cssText = style;
        return;
      }
    }
    styleSheet.addRule(selector,style);
  }
  else if (mediaType === 'object') {
    var styleSheetLength = (styleSheet.cssRules) ? styleSheet.cssRules.length : 0;
    for (var i = 0; i < styleSheetLength; i++) {
      if (styleSheet.cssRules[i].selectorText && styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) {
        styleSheet.cssRules[i].style.cssText = style;
        return;
      }
    }
    styleSheet.insertRule(selector + '{' + style + '}', styleSheetLength);
  }
}

Die Funktion wird wie folgt verwendet.

createCSSSelector('.mycssclass', 'display:none');

Answer 3

Kurze Antwort: Es ist kompatibel mit allen Browsern (insbesondere IE8/7):

function createClass(name,rules){
    var style = document.createElement('style');
    style.type = 'text/css';
    document.getElementsByTagName('head')[0].appendChild(style);
    if(!(style.sheet||{}).insertRule) 
        (style.styleSheet || style.sheet).addRule(name, rules);
    else
        style.sheet.insertRule(name+"{"+rules+"}",0);
}
createClass('.whatever',"background-color: green;");

Und dieser letzte Teil wendet die Klasse auf ein Element an:

function applyClass(name,element,doRemove){
    if(typeof element.valueOf() == "string"){
        element = document.getElementById(element);
    }
    if(!element) return;
    if(doRemove){
        element.className = element.className.replace(new RegExp("\\b" + name + "\\b","g"));
    }else{      
        element.className = element.className + " " + name;
    }
}

Hier ist auch eine kleine Testseite: https://gist.github.com/shadybones/9816763

Das Wichtigste ist die Tatsache, dass Stilelemente eine "styleSheet"/"sheet"-Eigenschaft haben, die Sie zum Hinzufügen/Entfernen von Regeln verwenden können.

Answer 4

Es gibt ein leichtes jQuery-Plugin, mit dem man CSS-Deklarationen generieren kann: jQuery-injectCSS

Sie verwendet nämlich JSS (CSS beschrieben durch JSON), aber es ist recht einfach zu handhaben, um dynamische CSS-Stylesheets zu erzeugen.

$.injectCSS({
    "#test": {
        height: 123
    }
});

Answer 5

One-Liner, eine oder mehrere neue Kaskadenregel(n) an das Dokument anhängen.

Dieses Beispiel fügt eine cursor:pointer für jeden button , input , select .

document.body.appendChild(Object.assign(document.createElement("style"), {textContent: "select, button, input {cursor:pointer}"}))