JavaScript 修改 CSS 伪类属性

背景

有时候我们希望通过JS代码控制伪类属性, 确苦于对策
实际上可通过向document.head中添加style子元素来实现

演示

        function css(style_text) {
            var s = document.createElement('style');
            s.innerText = style_text;
            document.head.appendChild(s);
        }

        document.onclick = function() {
            // 添加新的style元素, 覆盖原来的属性, 从而达到修改的目的
            css("button:hover {color: red;}");
        };

当鼠标悬停时

点击页面, 添加新的伪类button:hover, 此时再次在按钮上犹豫时, 按钮文本颜色发生了变化