...

View Full Version : 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.



<div id="results"><h3>Search Results:</h3>
<span name="user" class="user">Joe Smith</span>
<span name="user" class="user">Jon Doe</span>
</div>




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:


<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:



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum