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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Unable to get style properties

    I can't figure out why I can't get elements' style (left & top) properties. Below is my html & js code - anyone see what I'm missing? Thanks.

    Code:
    <div id="results"><h3>Search Results:</h3>				
    <span name="user" class="user">Joe Smith</span>
    <span name="user" class="user">Jon Doe</span>			       
    </div>
    Code:
    function prepInfo(){
    	if (document.getElementsByName("user")){
    		var user = document.getElementsByName("user");
    		for (var i = 0; i < user.length; i++){
    			user[i].onmouseover = function(){ getInfo(this); };  
    		}
    		
    	}
    
    function getInfo(element){
    	var xPos = element.style.left;
            var yPos = element.style.top;
            alert(xPos + '  ' + yPos);
    
    	}
    }
    }
    Last edited by Dan06; 05-08-2009 at 10:28 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    For some reason, you can't get top/left/width/height from the style of an object if those properties were set via a class.

    You *can* get them if the properties were set via style= direction in the tag.

    I'm sure there's a reason for this, buried in the docs somewhere, but... That's how it works.

    Simple HTML page as demo:
    Code:
    <html>
    <head>
    <style>
    .box { position: absolute; top: 50px; left: 50px; width: 200px; height: 220px;
           border: solid red 2px; background-color: pink;
           padding: 30px;
         }
    </style>
    <script>
    function show( obj )
    {
        alert( "top: " + obj.style.top 
             + "\nleft: " + obj.style.left
             + "\nwidth: " + obj.style.width
             + "\nheight: " + obj.style.height );
    }
    </script>
    </head>
    <body>
    <div class=box onclick="show(this);"> box 1 </div>
    
    <div class=box style="left: 400px; height: 130px;" onclick="show(this);"> box 2 </div>
    
    <div class=box style="top: 360px; width: 180px;" onclick="show(this);"> box 3 </div>
    </body>
    </html>

  • #3
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Dan06:

    Avoid using inline styles. Markup using them is invalid. No serious coder employs them. Always use classes.

    You can obtain the property values by accessing the CSS Rules object.

    Just so:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    	
    	var IE = false;
    	if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}	
    
    	function init(){
    
    		IE ? nRule = document.styleSheets[0].rules : nRule = document.styleSheets[0].cssRules;
    		for (i=0; i<nRule.length; i++)
    			{
    			 if (nRule[i].selectorText == ".testClass")
    				{
    				 alert('top = ' + nRule[i].style.top + '\nleft = ' +nRule[i].style.left);				 
    				}		
    			}
    	}
    
    	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">	
    	
    	 body {background-color: #fffacd; margin-top: 60px;}
    	.testClass {position: absolute; top: 250px; left: 50px;width: 200px; height: 150px; 
    		    border: 1px solid black; background-color: #ff69b4; font-size: 16pt; color: blue;}	
    	
    </style>
    </head>
    	<body>
    		
    		<div class="testClass">Now is the time for all good men to come to the aid of their country.</div>
    
    	</body>
    </html>
    Last edited by 12 Pack Mack; 05-07-2009 at 11:37 PM.

  • Users who have thanked 12 Pack Mack for this post:

    Old Pedant (05-07-2009)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    So what is the *reason* that those properties aren't "normally" accessible? When most other style properties are??

    I freely admit to never having looked for a reason; just discovered it didn't work and shrugged my shoulders.

    Thanks for the tip on the "rules."

  • #5
    Regular Coder
    Join Date
    Sep 2008
    Posts
    205
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the heads up. I was completely unaware that position attributes set via classes had to be accessed through css rules objects.


  •  

    Posting Permissions

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