您不能单独在特定元素上设置伪类的样式，就像不能在内联 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';

较旧和较小的浏览器可能不支持任何一种语法。动态样式表摆弄很少做，因为它很烦人，很少需要，而且在历史上很麻烦。

我为此拼凑了一个小型库，因为我确实认为在 JS 中存在操作样式表的有效用例。原因如下：

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

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

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

只需将 css 放在模板字符串中。

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

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

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

特殊性将解决其余的问题。然后您可以动态删除和添加样式标签。这是库的简单替代方法，并且可以处理 DOM 中的样式表数组。快乐编码！

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