閱讀：使用javascript懸停僞類

我做了一個覆蓋頁面上某些元素的懸停的函數。它在正常和：懸停效果之間褪色。那對於我不得不在我的CSS文件中創建一個.hover類。我覺得這有點不潔。我怎麼能讀到：hover僞類的內容？閱讀：使用javascript懸停僞類

2009-08-16 meo

UPDATE：我以某種方式得到了這個錯誤。下面的例子不起作用。有關說明，請參閱@bfavaretto's comment。

~~在Firefox，Opera和Chrome或任何其他正確實現window.getComputedStyle的瀏覽器都非常簡單。你只需要通過「懸停」作爲第二個參數：~~

<!DOCTYPE html> 

<html> 
<head> 
<meta charset="UTF-8"> 
<style type="text/css"> 
div { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background: red; 
} 
div:hover { 
    background: green; 
} 
</style> 
</head> 
<body> 

<div></div> 

<script type="text/javascript"> 
window.onload = function() { 
    var div = document.getElementsByTagName("div")[0]; 
    var style = window.getComputedStyle(div, "hover"); 
    alert(style.backgroundColor); 
}; 
</script> 
</body> 
</html>

~~但我不相信有尚未爲Internet Explorer的解決方案，除了使用document.styleSheets作爲濃湯建議。但會有分歧。~~因此，擁有.hover類是迄今爲止最好的解決方案。根本不是不乾淨。

來源

2009-08-16 19:54:16

thx！也許它不是不乾淨的，但是使用我的功能的人必須知道他必須在課堂上做。避免這種情況會很好。 – meo 2009-08-16 20:17:40

@david，出於好奇，你將如何處理IE問題？ – 2009-08-16 20:19:50

@Ionut：這是一些瀏覽器不一致的好例子，不值得您花時間修復。如果有人使用劣質的瀏覽器，他們仍然會得到一個工作的網站，它不會有很好的觸摸。 – nickf 2009-08-17 06:40:41

您可以訪問document.styleSheets並查找應用於該特定元素的規則。但是這並不比使用簡單的附加類更清潔。

來源

2009-08-16 19:33:29 Gumbo

樣式表不在document.styleSheets可用。 – 2013-02-11 12:01:40

如果有這裏的任何人誰使用接受的答案的問題，但它不會工作，這裏是一個不錯的功能可能：

function getPseudoStyle(id, style) { 
    var all = document.getElementsByTagName("*"); 
    for (var i=0, max=all.length; i < max; i++) { 
     var targetrule = ""; 
     if (all[i].id === id) { 
      if(all[i].selectorText.toLowerCase()== id + ":" + style) { //example. find "a:hover" rule 
       targetrule=myrules[i] 
      } 
     } 
     return targetrule; 
    } 
}

來源

2012-09-27 19:20:05

這也行不通，請檢查我的答案。 – bfavaretto 2012-09-27 19:52:58

代碼中的「myrules」是什麼？ – 2015-05-27 23:23:14

使用getComputedStyle作爲公認的答案是行不通的，因爲：

只有當元素實際處於該狀態時，懸停狀態的計算樣式纔可用。
getComputedStyle的第二個參數應該爲空或僞元素。它不適用於:hover，因爲它是僞類。

下面是一個替代的解決方案：從外部文件加載

function getCssPropertyForRule(rule, prop) { 
    var sheets = document.styleSheets; 
    var slen = sheets.length; 
    for(var i=0; i<slen; i++) { 
     var rules = document.styleSheets[i].cssRules; 
     var rlen = rules.length; 
     for(var j=0; j<rlen; j++) { 
      if(rules[j].selectorText == rule) { 
       return rules[j].style[prop]; 
      } 
     } 
    } 
} 

// Get the "color" value defined on a "div:hover" rule, 
// and output it to the console 
console.log(getCssPropertyForRule('div:hover', 'color'));

Demo

來源

2012-09-27 19:52:39 bfavaretto

可疑相同，但[此答案]（http://stackoverflow.com/a/16966533/2231440）的方法允許不是整個規則選擇器的選擇器。 – Trojan 2014-07-22 16:08:49

由於域限制，這不適用於其他域上的樣式表。所以這是部分解決方案 – MindFold 2015-01-03 15:04:17

閱讀：使用javascript懸停僞類

回答

相關問題