你怎么用Javascript添加CSS？
如何通过使用Javascript来添加CSS规则（例如strong { color: red } ）？
您也可以使用DOM Level 2 CSS接口（ MDN ）来执行此操作：
var sheet = window.document.styleSheets[0]; sheet.insertRule('strong { color: red; }', sheet.cssRules.length);
…除了（自然而然）的IE浏览器，它使用自己的边缘不同的措辞：
sheet.addRule('strong', 'color: red;', -1);
与createElement-set-innerHTML方法相比，这有一个理论上的优势，因为您不必担心在innerHTML中放入特殊的HTML字符，但实际上，style元素是传统HTML中的CDATA，而“<”而'＆'在样式表中很less使用。
你需要一个样式表，然后才能像这样开始追加。 这可以是任何现有的活动样式表：外部的，embedded的或空的，没关系。 如果没有一个，那么现在创build它的唯一标准方法是使用createElement。
简单直接的方法是为文档创build并添加一个新的style节点。
var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = "strong { color: red }"; document.body.appendChild(css);
Ben Blank的解决scheme在IE8中无法工作。
然而，这在IE8中工作
function addCss(cssCode) { var styleElement = document.createElement("style"); styleElement.type = "text/css"; if (styleElement.styleSheet) { styleElement.styleSheet.cssText = cssCode; } else { styleElement.appendChild(document.createTextNode(cssCode)); } document.getElementsByTagName("head")[0].appendChild(styleElement); }
下面是Chris Herring的解决scheme的一个稍微更新的版本，考虑到你可以使用innerHTML ，而不是创build一个新的文本节点：
function insertCss( code ) { var style = document.createElement('style'); style.type = 'text/css'; if (style.styleSheet) { // IE style.styleSheet.cssText = code; } else { // Other browsers style.innerHTML = code; } document.getElementsByTagName("head")[0].appendChild( style ); }
YUI最近刚刚为此添加了一个实用工具 。
您可以逐个元素地添加类或样式属性。
例如：
<a name="myelement" onclick="this.style.color='#FF0';">text</a>
你可以在这里做this.style.background，this.style.font-size等等。你也可以使用这个方法来应用样式ala
this.className='classname';
如果你想在javascript函数中做到这一点，你可以使用getElementByID而不是“this”。
这个简单的例子在html头部添加<style>
var sheet = document.createElement('style'); sheet.innerHTML = "table th{padding-bottom: 0 !important;padding-top: 0 !important;}\n" + "table ul { margin-top: 0 !important; margin-bottom: 0 !important;}\n" + "table td{padding-bottom: 0 !important;padding-top: 0 !important;}\n" + ".messages.error{display:none !important;}\n" + ".messages.status{display:none !important;} "; document.body.appendChild(sheet); // append in body document.head.appendChild(sheet); // append in head
源dynamic样式 – 使用JavaScript操作CSS
另一个select是使用JQuery存储元素的内联样式属性，追加到它，然后用新值更新元素的样式属性。 如下：
function appendCSSToElement(element, CssProperties) { var existingCSS = $(element).attr("style"); if(existingCSS == undefined) existingCSS = ""; $.each(CssProperties, function(key,value) { existingCSS += " " + key + ": " + value + ";"; }); $(element).attr("style", existingCSS); return $(element); }
然后用新的CSS属性作为对象执行它。
appendCSSToElement("#ElementID", { "color": "white", "background-color": "green", "font-weight": "bold" });
这可能不一定是最有效的方法（我打开如何改善这个问题的build议:)），但它绝对有效。
这是我的解决scheme，在最后的样式表列表的末尾添加一个css规则：
var css = new function() { function addStyleSheet() { let head = document.head; let style = document.createElement("style"); head.appendChild(style); } this.insert = function(rule) { if(document.styleSheets.length == 0) { addStyleSheet(); } let sheet = document.styleSheets[document.styleSheets.length - 1]; let rules = sheet.rules; sheet.insertRule(rule, rules.length); } } css.insert("body { background-color: red }");
这是我的通用函数，它参数化CSSselect器和规则，如果你希望添加到特定的表单中，可以select接受一个CSS文件名（区分大小写）（否则，如果你没有提供CSS文件名，将创build一个新的样式元素并将其添加到现有的头部，它将最多创build一个新的样式元素，并在未来的函数调用中重新使用它）。 适用于FF，Chrome和IE9 +（也许更早，未经testing）。
function addCssRules(selector, rules, /*Optional*/ sheetName) { // We want the last sheet so that rules are not overridden. var styleSheet = document.styleSheets[document.styleSheets.length - 1]; if (sheetName) { for (var i in document.styleSheets) { if (document.styleSheets[i].href && document.styleSheets[i].href.indexOf(sheetName) > -1) { styleSheet = document.styleSheets[i]; break; } } } if (typeof styleSheet === 'undefined' || styleSheet === null) { var styleElement = document.createElement("style"); styleElement.type = "text/css"; document.head.appendChild(styleElement); styleSheet = styleElement.sheet; } if (styleSheet) { if (styleSheet.insertRule) styleSheet.insertRule(selector + ' {' + rules + '}', styleSheet.cssRules.length); else if (styleSheet.addRule) styleSheet.addRule(selector, rules); } }
