Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    May 2004
    Location
    Norway
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Getting a style value from a element that use a class?!

    I have a element that uses a class, like:
    <style id="abc" class="myClass" onClick="test(id)">....</span>

    The function:

    function test(id) {
    alert(document.getElementById(id).style.backgroundColor);
    }

    Why doesn't this work?
    It returns nothing, but the class, which the element uses, has a background-color value set... ?!?!?!

    Am i missing something... ?

    Rune

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    There are a few things in that code snippet that I can say are wrong.

    First of all, there is not onclick attribute for the style element. Did you mean span and not style?

    Second, you should use this.id and not just id in your event handler.

    Third, the element.style property only contains styles that are set through one of two methods: Either in the style attribute of the element, or through the element.style from a script. It does not contain any properties from embedded or external stylesheets (the style and link elements). If you want to access all the styles set on an element, there are two methods. One as specified in the DOM, one proprietary in iew:
    Code:
    // DOM way
    document.defaultView.getComputedStyle(element,null).property;
    
    // IE way
    element.currentStyle.property;
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    New Coder
    Join Date
    May 2004
    Location
    Norway
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I ment "span" of course.
    Sorry for that, just a example code.

    So, are you saying that there is NO way to get the values set in a class? (embedded)

    Rune

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Rune Carlsen
    So, are you saying that there is NO way to get the values set in a class? (embedded)
    No, Liorean pointed out that there is two ways to accomplish this... For Mozilla based browsers you must use defaultView.getComputedStyle while you must use currentStyle with Internet Explorer...

    To be cross browser you must do some simple object detection to check which method to use... Below is a simple example...

    Code:
    <style>
     <!--
      span.myClass{ background-color:red; 
                    cursor:pointer;
      }
     -->
    </style>
    
    <script type="text/javascript">
     <!--//
      function test(id){
       var el = document.getElementById(id);
    
        if(document.defaultView && document.defaultView.getComputedStyle){ // IS MOZILLA BASED BROWSER //;
         var bg = document.defaultView.getComputedStyle(el, '').getPropertyValue("background-color");
         alert('DOM way: '+bg);
        }
    
        else if(document.uniqueID && el.currentStyle){ // IS INTERNET EXPLORER //;
         alert('IE way: '+el.currentStyle.backgroundColor);
        }
      }
     //-->
    </script>
    </head>
    
    <body>
    <span id="abc" class="myClass" onclick="test(this.id)">style test</span>
    .....Willy

  • #5
    New Coder
    Join Date
    May 2004
    Location
    Norway
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks.
    Based on this situation, can I still use:

    document.getElementById(el).style.backgroundColor = '#D9D8D6';

    to set the background-color value?

  • #6
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Yes, certainly.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #7
    New Coder
    Join Date
    May 2004
    Location
    Norway
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks everyone, works smoothly.

    Rune

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    just watch out... Moz will return color values in RGB mode, not in Hexa...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Actually, the value moz returns has sometimes been decimal and sometimes hex, they have changed normalised forms between versions. They'll likely change over to decimal rgba form when support for that is added. However, when you set it you can specify it any way you want.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    However, when you set it you can specify it any way you want.
    Do you know a way to get a desired (Hex or RGB) value of a color?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #11
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Yes, though I haven't tested it for compatibility. The method is rather well nested...
    Code:
    var
        colorValue=
            document.defaultView.getComputedStyle(element,nullorpseudoement)
            .getPropertyCSSValue(propertyname).getRGBColorValue();
        hexcolor=
            '#'+
            colorValue.red.getFloatValue(1).toString(16).replace(/^.$/,'0$&')+
            colorValue.green.getFloatValue(1).toString(16).replace(/^.$/,'0$&')+
            colorValue.blue.getFloatValue(1).toString(16).replace(/^.$/,'0$&');

    Edit: Corrected...
    Last edited by liorean; 09-13-2004 at 11:45 PM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #12
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    You mean .getPropertyCSSValue(), for one. And for another, getFloatValue() requires an argument. In this case, the number 1 should return the appropriate number. And only Mozilla supports that level of DOM scripting to my knowledge, Opera has (had) at least lackluster DOM2 Style, though I'm admittedly unsure about 7.6 or Safari...

  • #13
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Safari DOM2Style is far less reliable then that Opera has. Opera fully supports the interfaces they support. Safari support is wider (or at least was wider before op7.5), but sadly they expose many not properly supported interfaces.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #14
    New to the CF scene
    Join Date
    Mar 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This thread nearly solves a probelm I've been working on. Actually maybe the solution is here and and I just don't see it. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari.


    Code:
    // setStyleByClass: given an element type and a class selector,
    // style property and value, apply the style.
    // args:
    //  t - type of tag to check for (e.g., TD)
    //  c - class name
    //  p - CSS property
    //  v - value
    var ie = (document.all) ? true : false;
    var c_style = "foo";
    function setStyleByClass(t,c,p){
    	// alert("Hello world");
    	var elements;
    	if(t == '*') {
    		// '*' not supported by IE/Win 5.5 and below
    		elements = (ie) ? document.all : document.getElementsByTagName('*');
    	} else {
    		elements = document.getElementsByTagName(t);
    		
    	}
    	for(var i = 0; i < elements.length; i++){
    		var node = elements.item(i);
    		for(var j = 0; j < node.attributes.length; j++) {
    			if(node.attributes.item(j).nodeName == 'class') {
    				if(node.attributes.item(j).nodeValue == c) {
    					// alert("type is: " + t + "\n" + "class name: " + c + "\n" + "CSS property: " + p + "\n" + "Node style: " + node.style);
    					
    					TD = eval('node');
    					// alert("What we have is: " + TD);
    					// this seems to be a problem in IE
    					
    					// IS MOZILLA BASED BROWSER 
    					if(document.defaultView && document.defaultView.getComputedStyle){ 
    					 c_style = document.defaultView.getComputedStyle(TD, '').getPropertyValue("color");
    					// alert("text color is: " + c_style);
    					// alert('DOM way: '+ c_style);
    					 }
    					  else if(document.uniqueID && c_style.currentStyle){ 
    					  // IS INTERNET EXPLORER //
    					   alert('IE way:' );
    					  }
    					  
    				eval('node.style.' + p + " = '" + c_style + "'");
    				setStyleByTag("font","color", c_style,1)
    
    	
    				}
    			}
    		}
    	}
    }
    Last edited by mbier; 03-23-2005 at 11:44 PM. Reason: forgot something

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Avoid using eval method. Use square bracket notation. See my sig for more info.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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