SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Detecting tag style status

    I'm doing some what if R&D and have a question. Is there a way using JavaScript to detect what the status is of a particular style instruction for a specific tag? For example how could I detect the current display (e.g. Hidden, inline, block, etc) status of the following tag?

    <div id="mytag">bla</div>

    Thanks.
    Last edited by KLB; Dec 19, 2003 at 00:32.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I'm going to give a partial answer to my own question. You can detect any explicit style setting (e.g. <div id="mytag" style="color:black">) using the following:

    var test;
    test=document.getElementById('mytag').style.color;

    The problem is it doesn't detect the style of an element that has been changed by an outside stylesheet (e.g. defining a class in an outside stylesheet.

    If I could figure out how to detect the current style status of any tag (e.g. "color:black") regardless of whether or not it was defined by a class, in tag style or browser side style sheet, I could come up with a really cool way of managing some of my DHTML.

    Any help on this would be appreciated.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not perfect, but give this a try:
    Code:
    /* xGetComputedStyle
       Works in Moz and Op. For IE this works as long as padding and border use pixel units in the CSS.
    */
    function xGetComputedStyle(oEle, sProp)
    {
      var p = 0;
      if(document.defaultView && document.defaultView.getComputedStyle){
        p = document.defaultView.getComputedStyle(oEle,'').getPropertyValue(sProp)
      }
      else if(oEle.currentStyle) {
        // convert css property name to object property name for IE (can this be done with RE?)
        var a = sProp.split('-');
        sProp = a[0];
        for (var i=1; i<a.length; ++i) {
          c = a[i].charAt(0);
          sProp += a[i].replace(c, c.toUpperCase());
        }   
        p = oEle.currentStyle[sProp];
      }
      return parseInt(p) || 0;
    }
    oEle = the element object for which you wish to get a css property value.

    sProp = the css property name whose value you wish to get. Use CSS property names - not object property names, for example: use "background-color", instead of "backgroundColor".

  4. #4
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I'm getting an error and think I might not be defining oEle or sProp correctly this is what I'm doing

    Tag: <div id="mytag">

    Javascript function call: test=xGetComputedStyle('mytag', 'color');

    Error I'm getting:
    Event thread: onload
    Error:
    name: TypeError
    message: Statement on line 37: Expression evaluated to null or undefined and is not convertible to Object: document.defaultView.getComputedStyle(oEle, "")
    What am I doing wrong?
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var ele = document.getElementById('mytag');

    var test = xGetComputedStyle(ele, 'color');

  6. #6
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I made one additional change I converted "return parseInt(p) || 0;" to "return p;", and I got exactly what I wanted. Thank you!!!
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •