从JavaScript设置CSS伪类规则
我正在寻找一种方法来改变从JavaScript的伪类select器（如：链接，：hover等）的CSS规则。
所以CSS中的一个类似代码： a:hover { color: red }在JS中。
我在其他地方找不到答案。 如果有人知道这是浏览器不支持的东西，那也是一个有用的结果。
你不能在一个特定的元素上单独devise一个伪类，就像你没有内联style =“…”属性的伪类一样（因为没有select器）。
您可以通过更改样式表来完成，例如添加规则：
#elid:hover { background: red; }
假设你想要影响的每个元素都有一个唯一的ID来允许它被选中。
从理论上讲，你想要的文件是http://www.w3.org/TR/DOM-Level-2-Style/Overview.html这意味着你可以（给定一个预先存在的embedded或链接的样式表）使用类似的语法：;
document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0); document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';
IE当然需要自己的语法：
document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0); document.styleSheets[0].rules[0].style.backgroundColor= 'red';
较老的和较小的浏览器可能不支持这两种语法。 dynamic样式表 – 摆弄很less做，因为它是相当烦人得到正确，很less需要，历史上麻烦。
我为此扔了一个小型库，因为我认为有有效的用例来处理JS中的样式表。 原因是：
- 设置必须计算或检索的样式 – 例如，从cookie设置用户的首选字体大小。
- 设置行为（而不是审美）风格，特别是对于UI小部件/插件开发人员。 选项卡，传送带等常常需要一些基本的CSS才能运行 – 不应该要求核心function的样式表。
- 因为CSS规则适用于所有当前和将来的元素，所以比内联样式更好，在Firebug / Developer Tools中查看时不要混乱HTML。
一个function，以应付跨浏览器的东西：
addCssRule = function(/* string */ selector, /* string */ rule) { if (document.styleSheets) { if (!document.styleSheets.length) { var head = document.getElementsByTagName('head')[0]; head.appendChild(bc.createEl('style')); } var i = document.styleSheets.length-1; var ss = document.styleSheets[i]; var l=0; if (ss.cssRules) { l = ss.cssRules.length; } else if (ss.rules) { // IE l = ss.rules.length; } if (ss.insertRule) { ss.insertRule(selector + ' {' + rule + '}', l); } else if (ss.addRule) { // IE ss.addRule(selector, rule, l); } } };
我的窍门是使用属性select器。 JavaScript的属性更容易设置。
CSS
.class{ /*normal css... */} .class[special]:after{ content: 'what you want'}
JavaScript的
function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); }
HTML
<element id='x' onclick="setSpecial(this.id)"> ...
还有另一种select。 而不是直接操纵伪类，创build真正的类，模拟相同的东西，如“hover”类或“访问”类。 使用通常的“。”来设置类。 语法，然后您可以使用JavaScript在适当的事件触发时添加或从元素中删除类。
而不是直接用javascript设置伪类规则，你可以在不同的CSS文件中设置不同的规则，然后使用Javascript来切换一个样式表并closures另一个样式表。 一个方法在A List Apart （更多细节）中有描述。
设置CSS文件为，
<link rel="stylesheet" href="always_on.css"> <link rel="stylesheet" title="usual" href="preferred.css"> <!-- on by default --> <link rel="alternate stylesheet" title="strange" href="alternate.css"> <!-- off by default -->
然后使用javascript切换它们：
function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")<i>); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } }
如前所述，这不是浏览器所支持的。
如果你没有dynamic地使用样式（即把它们从数据库中拉出来），你应该可以通过在页面主体中添加一个类来解决这个问题。
CSS会看起来像这样：
a:hover { background: red; } .theme1 a:hover { background: blue; }
和JavaScript来改变这将是这样的：
// Look up some good add/remove className code if you want to do this // This is really simplified document.body.className += " theme1";
切换样式表进出是做到这一点的方法。 这是一个dynamic构build样式表的库，所以您可以即时设置样式：
http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/
在jQuery中，您可以轻松设置hover伪类。
$("p").hover(function(){ $(this).css("background-color", "yellow"); }, function(){ $(this).css("background-color", "pink"); });
如果你使用REACT，有什么叫做镭 。 这在这里非常有用：
如果指定了交互式样式，则将处理程序添加到道具上，例如onMouseEnter用于：hover，必要时包装现有的处理程序
如果任何处理程序被触发（例如通过hover），则Radium调用setState来更新组件状态对象上的Radium特定字段
- 在重新渲染时，通过在Radium特定状态下查找元素的关键字或ref来解决任何适用的交互式样式，例如：hover
这里是一个包含两个函数的解决scheme：addCSSclass为文档添加一个新的css类，而toggleClass将其打开
该示例显示了将自定义滚动条添加到div
// If newState is provided add/remove theClass accordingly, otherwise toggle theClass function toggleClass(elem, theClass, newState) { var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g'); var add = (arguments.length > 2 ? newState : (elem.className.match(matchRegExp) === null)); elem.className = elem.className.replace(matchRegExp, ''); // clear all if (add) elem.className += ' ' + theClass; } function addCSSclass(rules) { var style = document.createElement("style"); style.appendChild(document.createTextNode("")); // WebKit hack :( document.head.appendChild(style); var sheet = style.sheet; rules.forEach((rule, index) => { try { if ("insertRule" in sheet) { sheet.insertRule(rule.selector + "{" + rule.rule + "}", index); } else if ("addRule" in sheet) { sheet.addRule(rule.selector, rule.rule, index); } } catch (e) { // firefox can break here } }) } let div = document.getElementById('mydiv'); addCSSclass([{ selector: '.narrowScrollbar::-webkit-scrollbar', rule: 'width: 5px' }, { selector: '.narrowScrollbar::-webkit-scrollbar-thumb', rule: 'background-color:#808080;border-radius:100px' } ]); toggleClass(div, 'narrowScrollbar', true);
<div id="mydiv" style="height:300px;width:300px;border:solid;overflow-y:scroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus a diam volutpat, ullamcorper justo eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit nec sodales sodales. Etiam eget dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros metus. Nunc dui felis, accumsan nec aliquam quis, fringilla quis tellus. Nulla cursus mauris nibh, at faucibus justo tincidunt eget. Sed sodales eget erat consectetur consectetur. Vivamus a diam volutpat, ullamcorper justo eu, dignissim ante. Aenean turpis tortor, fringilla quis efficitur eleifend, iaculis id quam. Quisque non turpis in lacus finibus auctor. Morbi ullamcorper felis ut nulla venenatis fringilla. Praesent imperdiet velit nec sodales sodales. Etiam eget dui sollicitudin, tempus tortor non, porta nibh. Quisque eu efficitur velit. Nulla facilisi. Sed varius a erat ac volutpat. Sed accumsan maximus feugiat. Mauris id malesuada dui. </div>
