Topic: Is there a way to getComputedStyle from an external stylesheet in Javascript? Pages that link to <a href="https://ozoneasylum.com/backlink?for=30639" title="Pages that link to Topic: Is there a way to getComputedStyle from an external stylesheet in Javascript?" rel="nofollow" >Topic: Is there a way to getComputedStyle from an external stylesheet in Javascript?\
 
Author Thread
Maskkkk
Paranoid (IV) Inmate

From: Johnstown, PA
Insane since: Mar 2002

 IP logged posted posted 11-07-2008 14:52 Edit Quote

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 };
    */
}



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
}





- AIM: MASKKKK

01001101011000010111001101101011011010110110101101101011
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 11-07-2008 15:58 Edit Quote

[quickie_before_a_meeting] But on a higher level, what is your colleague really trying to achieve here ? and why ? I have a feeling of over engineering here. [/quickie_before_a_meeting]
Maskkkk
Paranoid (IV) Inmate

From: Johnstown, PA
Insane since: Mar 2002

 IP logged posted posted 11-07-2008 16:22 Edit Quote

Yes poi,

So do I, I think the solution is extremely over engineered. But I can't really tell him that. He won't listen to me. He's been programming professionally for 10 years. I've been programming for 20 years, but only professionally for 2 years. Thus I can't tell him anything. So I'm just trying to help him out the best I can. He's a windows programmer by profession.

Thanks,
Maskkkk
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 11-07-2008 18:13 Edit Quote

You can always show him instead of telling him, but ...

http://fn-js.info/jsbot?q=computed
coach
Bipolar (III) Inmate

From:
Insane since: May 2011

 IP logged posted posted 05-31-2011 11:10 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu