我正在寻找一种从 JavaScript 中更改伪类选择器的 CSS 规则的方法(例如:link、:hover等)。
因此,需要在 JS 中实现这样一个 CSS 代码的类比:a:hover { color: red }
。
我在其他地方都找不到答案;如果有人知道浏览器不支持这个功能,那么这也是一个有用的结果。
我正在寻找一种从 JavaScript 中更改伪类选择器的 CSS 规则的方法(例如:link、:hover等)。
因此,需要在 JS 中实现这样一个 CSS 代码的类比:a:hover { color: red }
。
我在其他地方都找不到答案;如果有人知道浏览器不支持这个功能,那么这也是一个有用的结果。
您不能仅针对特定元素设置伪类样式,就像您无法在inline 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中操作样式表有有效的用例。原因如下:
只需将css放置在一个模板字符串中。
const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;
然后创建一个样式元素,将字符串放入样式标签中,并将其附加到文档中。
const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);
具体性将照顾其他部分。 然后,您可以动态地删除和添加样式标签。 这是使用库和在DOM中操纵样式表数组的简单替代方法。 祝你编码愉快!
insertAdjacentElement
方法需要两个参数,第一个参数用于确定相对于参考元素的位置(请参见此处)。这是最近的更改吗?(将“beforeend”添加到答案中)。 - collapsaraddCssRule = 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);
}
}
};
我的技巧是使用属性选择器。属性更容易用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)"> ...
你可以考虑使用CSS变量来实现。这个想法是将想要更改的属性设置为CSS变量。然后,在JavaScript中更改该变量的值。
以下是示例:
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>
与其直接使用Javascript设置伪类规则,您可以在不同的CSS文件中以不同方式设置规则,然后使用Javascript关闭一个样式表并打开另一个样式表。详见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;
}
}
}
还有另一种选择。不要直接操作伪类,而是创建模拟相同效果的真正类,例如“hover”类或“visited”类。使用通常的“.”语法为这些类设置样式,然后在适当事件触发时,可以使用JavaScript向元素添加或删除类。
:before
和:after
是伪元素,而不是类。 - Roy Ling如前所述,浏览器不支持此功能。
如果您不是动态生成样式(例如从数据库中提取),则应该可以通过向页面的 body 添加类来解决此问题。
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";
element.classList.add
不受良好支持吗?我一直看到人们使用 element.className +=
。 - Joel Cornett$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
a.href = url; return a.hostname === loc.hostname && a.port === loc.port && a.protocol === loc.protocol;
}` - WickyNilliams