html 动态添加类 css,如何在JavaScript中动态创建CSS类并应用？

找到了更好的解决方案适用于所有浏览器。

使用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 

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 

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 

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 

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，它实际上还是创建了一个选择器。所以别忘了在你的类名前面加上.(句号)。无需提及，您也可以使用此函数创建其他选择器。