我在尋找一種方法來改變偽類選擇器的CSS規則(比如:link，:hover等。)來自JavaScript。
所以CSS代碼的一個模擬:JS中的a:hover { color: red }。
我在別的地方找不到答案；如果有人知道這是瀏覽器不支持的，這也將是一個有益的結果。
你不能單獨在一個特定的元素上設計一個偽類，就像你不能在一個內聯的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工具中查看時不會弄亂HTML。 只需將css放在一個模板字符串中。
const cssTemplateString = `.foo:[psuedoSelector]{prop: value}`;然后創建一個樣式元素，將字符串放在樣式標簽中，并將其附加到文檔中。
const styleTag = document.createElement("style");
styleTag.innerHTML = cssTemplateString;
document.head.insertAdjacentElement('beforeend', styleTag);其他的就交給你了。然后，您可以動態地移除和添加樣式標簽。這是對庫和DOM中的樣式表數組的簡單替代。編碼快樂！
一個處理跨瀏覽器事務的功能:
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);
}
}
};我的技巧是使用屬性選擇器。javascript更容易設置屬性。
鋼性鑄鐵
.class{ /*normal css... */}
.class[special]:after{ content: 'what you want'}java描述語言
function setSpecial(id){ document.getElementById(id).setAttribute('special', '1'); }超文本標記語言
<element id='x' onclick="setSpecial(this.id)"> ...您可以考慮的一個選項是使用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>還有另一種選擇。與其直接操作偽類，不如創建模擬相同事物的真實類，比如“懸停”類或“訪問”類。用通常的“.”來設計班級的風格語法，然后當適當的事件觸發時，您可以使用JavaScript在元素中添加或移除類。
您可以在不同的CSS文件中不同地設置規則，然后使用javascript關閉一個樣式表并打開另一個樣式表，而不是直接用Javascript設置偽類規則。在列表中描述了一種方法(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;
}
}
}如前所述，這不是瀏覽器所支持的。
如果你不能動態地設計樣式(例如，從數據庫中提取樣式)你應該可以通過在頁面主體中添加一個類來解決這個問題。
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";在jquery中，您可以很容易地設置懸停偽類。
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});下面是一個包含兩個函數的解決方案: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>如果用REACT，有一種東西叫鐳。它在這里非常有用:
如果指定了交互樣式，則為props添加處理程序，例如onMouseEnter for :hover，必要時包裝現有的處理程序
如果任何一個處理程序被觸發，例如通過懸停，Radium調用setState來更新組件上特定于Radium的字段 狀態對象
重新渲染時，解決任何適用的交互樣式，例如:懸停，通過查找元素的鍵或特定于Radium的ref 狀態