从 JavaScript 设置 CSS 伪类规则

Question

我正在寻找一种方法来更改 JavaScript 中伪类选择器（例如：link、:hover 等）的 CSS 规则。

JS 中的 CSS 代码类似：a:hover { color: red }。

我在其他地方找不到答案； 如果有人知道这是浏览器不支持的东西，那也将是一个有用的结果。

Answer 1

您不能单独在特定元素上设置伪类的样式，就像在内联 style="..." 属性中不能有伪类一样（因为没有选择器）。

您可以通过更改样式表来实现此目的，例如通过添加规则：

#elid:hover { background: red; }

假设您想要影响的每个元素都有一个唯一的 ID 以允许选择它。

理论上，您想要的文档是 http://www.w3。 org/TR/DOM-Level-2-Style/Overview.html 这意味着您可以（给定预先存在的嵌入或链接样式表）使用如下语法：

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

Older and次要浏览器可能不支持这两种语法。 动态样式表的修改很少被采用，因为它很难正确执行，很少需要，而且历史上很麻烦。

Answer 2

我为此构建了一个小型库，因为我确实认为在 JS 中操作样式表有有效的用例。 原因是：

• 设置必须计算或检索的样式 - 例如从 cookie 设置用户的首选字体大小。
• 设置行为（而非美学）风格，特别是对于 UI 小部件/插件开发人员。 选项卡、轮播等通常需要一些基本的 CSS 才能正常运行 - 不应该要求核心功能的样式表。
• 比内联样式更好，因为 CSS 规则适用于所有当前和未来的元素，并且在 Firebug/开发人员工具中查看时不会使 HTML 混乱。

Answer 3

只需将 css 放入模板字符串中即可。

const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;

然后创建一个样式元素并将字符串放置在样式标签中并将其附加到文档中。

const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);

特异性会解决剩下的问题。 然后您可以动态删除和添加样式标签。 这是库和 DOM 中样式表数组的一个简单替代方案。 快乐编码！

Answer 4

处理跨浏览器问题的函数：

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

Answer 5

我的技巧是使用属性选择器。 通过 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)"> ...  

Answer 6

您可以考虑的一种选择是使用 CSS 变量。 这个想法是将要更改的属性设置为 CSS 变量。 然后，在 JS 中更改该变量的值。

请参阅下面的示例

function changeColor(newColor) {
  document.documentElement.style.setProperty("--anchor-hover-color", newColor);
  // ^^^^^^^^^^^-- select the root 
}

:root {
  --anchor-hover-color: red;
}

a:hover { 
  color: var(--anchor-hover-color); 
}

<a href="#">Hover over me</a>

<button onclick="changeColor('lime')">Change to lime</button>
<button onclick="changeColor('red')">Change to red</button>

Answer 7

还有另一种选择。 不要直接操作伪类，而是创建模拟相同事物的真实类，例如“悬停”类或“访问”类。 使用通常的“.”来设计类的样式。 语法，然后当适当的事件触发时，您可以使用 JavaScript 在元素中添加或删除类。

Answer 8

您可以在不同的 CSS 文件中设置不同的规则，然后使用 Javascript 关闭一个样式表并打开另一个样式表，而不是直接使用 javascript 设置伪类规则。 A List Apart 中描述了一种方法（更多详细信息请参见 qv.）。

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

Answer 9

正如已经指出的，这不是浏览器支持的东西。

如果您没有动态地提出样式（即从数据库或其他东西中提取它们），您应该能够通过向页面主体添加一个类来解决这个问题。

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

Answer 10

在jquery中你可以轻松设置hover伪类。

$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});

Answer 11

这是一个包含两个函数的解决方案： 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>

Answer 12

如果你使用 REACT ，有一个叫做 radium 的东西。 它在这里非常有用：

• 如果指定了交互样式，则将处理程序添加到 props，例如 onMouseEnter for :hover，如有必要，则包装现有处理程序

• 如果任何处理程序被触发（例如通过悬停），Radium 会调用 setState 来更新组件上的 Radium 特定字段
  状态对象

• 重新渲染时，通过在特定于 Radium 的元素中查找元素的键或引用来解析适用的任何交互样式，例如 :hover
  状态