mikoro Posted May 4, 2007 Share Posted May 4, 2007 I have this in my CSS file:a { color: red; }a:hover { color: green; }Then with Javascript I fetch the link element (to variable named link) and I read the color value:var color = link.style.color;How could I read the :hover color?var hoverColor = ?Thanks Link to comment Share on other sites More sharing options...
aspnetguy Posted May 4, 2007 Share Posted May 4, 2007 you cannot do this directly as hover is CSS's equivilant to onmouseover. Link to comment Share on other sites More sharing options...
mikoro Posted May 4, 2007 Author Share Posted May 4, 2007 Ok, thanks. I stumbled into getComputedStyle when googling around and it looked like it would allow me to read the pseudo-information of an element. But not surprisingly it didn't work...I'd like to do this because at the moment I have to specify the same colors twice, once in css and once in my javascript file. Link to comment Share on other sites More sharing options...
aalbetski Posted May 4, 2007 Share Posted May 4, 2007 This can be done using the styleSheets collection object. This code will read for both IE and Firefox. Note that it is enough to get you going, you will need to provide the looping to determine that you are reading the correct rule. Here's a good link for more info: http://www.javascriptkit.com/domref/cssrule.shtml<style> a {color:blue;} a:hover {color:red}</style><script> if(navigator.userAgent.indexOf("Firefox")!=-1) { document.write(document.styleSheets[0].cssRules[1].cssText) } if(navigator.userAgent.indexOf("IE")!=-1) { document.write(document.styleSheets[0].rules[1].style.color) }</script> Link to comment Share on other sites More sharing options...
aspnetguy Posted May 4, 2007 Share Posted May 4, 2007 hey good find, I have never seen the styleSheets collection before. Link to comment Share on other sites More sharing options...
Guest Landskov Posted June 25, 2007 Share Posted June 25, 2007 This can be done using the styleSheets collection object. This code will read for both IE and Firefox. Note that it is enough to get you going, you will need to provide the looping to determine that you are reading the correct rule. Here's a good link for more info: http://www.javascriptkit.com/domref/cssrule.shtml<style> a {color:blue;} a:hover {color:red}</style><script> if(navigator.userAgent.indexOf("Firefox")!=-1) { document.write(document.styleSheets[0].cssRules[1].cssText) } if(navigator.userAgent.indexOf("IE")!=-1) { document.write(document.styleSheets[0].rules[1].style.color) }</script>Warning: document.styleSheets[0] does not necessarily contain the css rules you expect. I had to start with for (var j=0; j<document.styleSheets.length; j++) {to be sure that iterating through cssRules would reach the rule in my css file that I was interested in. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.