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, 此时再次在按钮上犹豫时, 按钮文本颜色发生了变化