Is there a way to getComputedStyle from an external stylesheet in Javascript? — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Is there a way to getComputedStyle from an external stylesheet in Javascript?

This page's ID: 30639

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	My co-worker is writing some js code which retrieves a style from an external stylesheet for use in a menu. The problem he is having is that when he attempts to retrieve the css attributes from a style class in the external stylesheet, he will retrieve the default values rather than those defined in the stylesheet. Note that whenever he defines his styles within the HTML page, everything works correctly. He was having this problem in FF3 and FF2. Bellow is the code he used to retrieve the style class's attributes: [code] function GetMenuStyles(normID,hoverID) { var nColor,nTextColor,nFontSize; var hColor,hTextColor,hFontSize; //normal var ref=document.getElementById(normID); if(ref) { if (ref.currentStyle) { nColor=ref.currentStyle.backgroundColor; nTextColor=ref.currentStyle.color; nFontSize=ref.currentStyle.fontSize; } else if(document.defaultView.getComputedStyle) { var elementStyle=document.defaultView.getComputedStyle(ref,null); if (elementStyle) { nColor=elementStyle.getPropertyValue("background-color"); nTextColor=elementStyle.getPropertyValue("color"); nFontSize=elementStyle.getPropertyValue("font-size"); } } } //Hover var hID; if(hoverID) hID=hoverID; else hID=normID; ref=document.getElementById(hID); if(ref) { if (ref.currentStyle) { hColor=ref.currentStyle.backgroundColor; hTextColor=ref.currentStyle.color; hFontSize=ref.currentStyle.fontSize; } else if(document.defaultView.getComputedStyle) { var elementStyle=document.defaultView.getComputedStyle(ref,null); if (elementStyle) { hColor=elementStyle.getPropertyValue("background-color"); hTextColor=elementStyle.getPropertyValue("color"); hFontSize=elementStyle.getPropertyValue("font-size"); } } } //validate that stuff is defined, provide defaults if(!nColor) nColor='#00ff00'; if(!nTextColor) nTextColor='#000000'; if(!nFontSize) nFontSize='12px'; if(!hColor) hColor='#00ff00'; if(!hTextColor) hTextColor='#000000'; if(!hFontSize) hFontSize='12px'; //convert the style colors to hex without the # nColor=convertColor(nColor); nTextColor=convertColor(nTextColor); hColor=convertColor(hColor); hTextColor=convertColor(hTextColor); var rtrnObject= { normal: { backgroundColor: nColor, textColor: nTextColor, fontSize: nFontSize }, hover: { backgroundColor: hColor, textColor: hTextColor, fontSize: hFontSize } }; return rtrnObject; /* var normColor=getClassColors(normClass); var hoverColor=getClassColors(hoverClass); return { normal: normColor, hover: hoverColor }; */ } [/code] And here his the code of the offending css stylesheet: [code] .linkPrimarySiteNav { background-color: #0080FF; color: #FFFFFF; text-decoration: none; font-size: 16px; font-weight: bold; } .linkPrimarySiteNav_hover,.linkPrimarySiteNav:hover { background-color: #30b0FF; color: #00FF00; text-decoration: none; font-size: 12px } [/code] [IMG]http://i9.photobucket.com/albums/a58/Maskkkk/maskkkkaroni.png[/IMG] - AIM: MASKKKK [url=http://nickciske.com/tools/binary.php] 01001101011000010111001101101011011010110110101101101011[/url] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu