SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Retrieving CSS value

    Hi,

    I am having difficulty retrieving the value of a css attribute. The value is not being returned, and I am hoping there is some syntax to retrieve the value that I am not aware of. Here is a simple example of what I am trying to do, and also what is not working:

    HTML Code:
    var moveElement = document.getElementById('moveElement');
    var top = moveElement.style.top;
    
    alert(top);
    This displays an alert box with nothing in it.

    Thanks,
    Jason

  2. #2
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This gets the top value of a div:

    Code:
    <script type="text/javascript">
    function getTopValue() {
        var mybox = document.getElementById("mybox");
        alert(mybox.style.top);
    }
    </script>
    
    <div id="mybox" style="position:absolute; top:50px; left:50px; width:50px; height:50px; background:blue;"></div>
    
    <a href="#" onclick="getTopValue()">get top value</a>

  3. #3
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks magenta,

    That works if the styles are inline, but not if they are in an external style sheet. I could just make the style inline, but would like to stay consistent. Is there a way to grab a value from the external style sheet?

    Thanks,
    Jason

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    If an element has been styles with a css class, that doesn't affect the javascript style properties. They still stay empty. If it's a CSS class name that you've set, you can get that with the className property.

    There are a number of ways of getting the style if you have the classname, but they're not really compatible across the major browsers.
    http://www.quirksmode.org/dom/w3c_css.html

    The style properties can be set explicitly in the html code itself, as in the previous example, but that's even worse than having inline css. So instead, set the style properties from javascript itself.

    So that you can guarantee that you'll be able to read them later on from javscript as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need two functions for this, because IE reads the style sheet cascade with the javascript (camelCase) syntax, and the other browsers use the hyphen-separated lower case names.


    Code:
    document.deepStyle= function(who,cssprop){
    	var val= '', str= '';
    	if(!who || who.style== undefined) return '';
    	str= cssprop.dasher();
    	if(who.currentStyle) val= who.currentStyle[str];
    	else {
    		var dv= document.defaultView || window;
    		if(dv && dv.getComputedStyle){
    			str= str.dasher(true);
    			val= dv.getComputedStyle(who,'').getPropertyValue(str);
    		}
    	}
    	if(!val) val= who.style[str];
    	return val || '';
    }
    
    String.prototype.dasher= function(boo){
    	var x= this;
    	if(/^[A-Z]+$/.test(x) || /\-/.test(x)) x = x.toLowerCase();
    	if(boo=== true ){
    		if(/[a-z][A-Z]/.test(x)){
    			x= x.replace(/[A-Z]/g, function(w){
    				return "-" + w.toLowerCase();
    			})
    		}
    	}
    	else if(/\-/.test(x)){
    		x= x.replace(/\-[a-z]/g, function(w){
    			return w.charAt(1).toUpperCase() + w.substring(2);
    		})
    	}
    	return x;
    }

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2007
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SimonJ621 View Post
    Thanks magenta,

    That works if the styles are inline, but not if they are in an external style sheet. I could just make the style inline, but would like to stay consistent. Is there a way to grab a value from the external style sheet?

    Thanks,
    Jason
    Check out the following:

    getComputedStyle() - DOM
    currentStyle - IE

    These get the cascade.

  7. #7
    SitePoint Enthusiast SimonJ621's Avatar
    Join Date
    Mar 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the suggestions and comments. I've decided the most efficient way (mostly because of browser in-compliance) is along the lines of pmw57's suggestion. I simply create the style attribute via DOM, allowing me to perform subsequent changes to that value. Here is the code, simplified:

    Code:
    var moveElement = document.getElementById('moveElement');
    var eHeight = parseInt(moveElement.style.top);
    
    if (isNaN(eHeight)){
    	eHeight = 0;
    }
    
    eHeight += 25;
    var topPos = eHeight + 'px';
    				
    moveElement.style.top = topPos;
    Thanks again for all your input.


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
  •