如何在JavaScript中动态创建CSS类并应用？

我需要在JavaScript中动态创建一个CSS样式表类，并将其分配给一些HTML元素，如div，table，span，tr等，以及一些控件，如asp：Textbox，Dropdownlist和datalist。

可能吗？

样品会很好。

---

虽然我不确定为什么要用JavaScript创建CSS类，但下面是一个选项：

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

---

找到了一个更好的解决方案， 适用于所有浏览器。
使用document.styleSheet添加或替换规则。 接受的答案是简短而方便的，但这在IE8中起作用，而且不太适用。

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);
  }
}

功能使用如下。

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

请注意，即使函数名称是createClass，它实际上也会创建一个选择器。 所以不要忘记在你的课程名称前添加（句号）。 无需提及您可以使用此功能创建其他选择器。

---

简而言之，这是兼容的“在所有浏览器上”（特别是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;");

最后一点将该类应用于元素：

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

这里还有一个测试页面：https：//gist.github.com/shadybones/9816763

关键点在于样式元素有一个“styleSheet”/“sheet”属性，您可以使用它来添加/删除规则。

链接地址: http://www.djcxy.com/p/89299.html

上一篇: How to dynamically create CSS class in JavaScript and apply?

下一篇: Android, how to remove extra white space when loading .gif into Webview