Resolved Unable to get style properties

Dan06 · 05-07-2009, 08:56 PM

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);

	}
}
}

Old Pedant · 05-07-2009, 10:20 PM

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>

12 Pack Mack · 05-07-2009, 11:21 PM

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>

Old Pedant · 05-07-2009, 11:30 PM

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."

Dan06 · 05-08-2009, 10:28 PM

Thanks for the heads up. I was completely unaware that position attributes set via classes had to be accessed through css rules objects.