new problem. document.getElementById().width returning unassigned. why

[panchosansa]

Here is my js function:

function setNewsPosition()
{
position=document.getElementById("image_1").width;//returns value
newsWidth= document.getElementById("news").width;//returns unassigned
alert(position);
var news= document.getElementById("news");
news.style.left= position + newsWidth + 'px';
}

Here is the css part that concerns the function:

div#news
{
float:left;
width:25%;
margin-left:-25%;
background:#0099cc;
}

I first thought it is because of the percentage value, but I've switched to px and it still returned unassigned. Does anyone have a suggestion why this might be and how it could be fixed.

Greetings,
Valentin

[daveVk]

Try

newsWidth= document.getElementById("news").style.width;

confusing html width attribute with style width?

[panchosansa]

Doesn't work either.
If I do alert(newsWidth); after assigning its value as you suggested it, the window pops up and there is no value/text in it. It's empty.
Do you have any other suggestion? I appreciate your help.

[Robin_reala]

The trouble is that you're looking for values set in the style attribute, but there's no style attribute. You need to use getComputedStyle on the object. The problem with that though is that IE doesn't understand it. For IE you need to access the object's currentStyle property. Your best bet in this situation is to use one of the functions floating around the net that combines both ways into a single method. For example, here's ppk's function from quirksmode:

function getStyle(el,styleProp)
{
var x = document.getElementById(el);
if (x.currentStyle)
var y = x.currentStyle[styleProp];
else if (window.getComputedStyle)
var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
return y;
}

For your problem, you'd use the following code:

function setNewsPosition()
{
position=document.getElementById("image_1").width;
newsWidth=getStyle("news", "width");
var news= document.getElementById("news");
news.style.left= position + newsWidth + 'px';
}

You could speed things up slightly by modifying the getStyle() function to accept an object instead of an id string and therefore only do one getElementById() but that's your call.

[edited by: Robin_reala at 11:37 am (utc) on July 22, 2006]

[daveVk]

Lets try again

newsWidth= document.getElementById("news").offsetWidth;

Microsoft doc says "no public standard" however seems to work on most browsers. one of set offsetLeft, offsetTop, offsetHeight, and offsetWidth

[panchosansa]

offsetWidth worked fine. I appreciate your help.

V