style.left with external css

[Hignar]

I'm having problems with accessing the left value of an element if I've defined it in an external style sheet.

There's no problem if I define the style within the HTML, but I don't really want to do that.

So, if I have

[highlight="HTML"]
<div id="myDiv" style="position: relative; left: 150px;"></div>
[/highlight]

then
[highlight="javascript"]
alert(document.getElementById('myDiv').style.left) ;
[/highlight]

produces an alert showing "150px".

However, if I use an external style sheet with
[highlight="CSS"]
#myDiv {
position: relative;
left: 150px;
}
[/highlight]

and declare the div as
[highlight="HTML"]
<div id="myDiv"></div>
[/highlight]

then the same javascript line as before produces an empty alert. I'm guessing it's because the javascript can't access the external style sheet. Is there a way around this?

If I have to include the style within the HTML then I guess I'll have to, but I'd much rather keep everything to do with styles in a seperate file.

[amrosama]

make sure you have included the CSS file in the head like:

<link href="mycss.css" rel="stylesheet" type="text/css" />

btw: did you mean:

<div id="myDiv" style="position:relative; left:150px;"></div>

instead of:

<div id="myDiv" style="position=relative; left=150px;"></div>

[Hignar]

make sure you have included the CSS file in the head like:

<link href="mycss.css" rel="stylesheet" type="text/css" />

yeah, the CSS file's been included and the page displays as expected. It's just when I try to access the left value through js that I have a problem.

btw: did you mean:

<div id="myDiv" style="position:relative; left:150px;"></div>

instead of:

<div id="myDiv" style="position=relative; left=150px;"></div>

well spotted

I'll edit it.

Unfortunately it's correct in my source code, so doesn't solve the problem.

[Hignar]

Bah, found a solution but it's browser dependant.

For Firefox, Opera etc it looks like I need to use
[highlight="javascript"]
var my_div = document.getElementById('myDiv');
var my_style = document.defaultView.getComputedStyle(my_div,"");
alert(my_style.left);
[/highlight]

but for IE I have to use
[highlight="javascript"]
var my_div=document.getElementById("myDiv");
alert(my_div.currentStyle.width);
[/highlight]

any alternatives?

[amrosama]

oh i see the problem now, i had a problem like it before i ended up using inline style tags for the elements i need to access it's style.
but if you have to theres a way to get CSS attriutes set in an external CSS class by using this:

alert(getComputedStyle(document.getElementById('myDiv'), '').getPropertyValue('left'));

i tried it in firefox and opera but im not sure if its gonna work in IE

EDIT: i googled the function above around , it doesnt workin IE but you can use this for IE only

alert(document.getElementById('myDiv').currentStyle['left']);

[Hignar]

Cheers, that's the same solution I came up with. Guess I'm going to have to make a judgement call as to whether the browser dependant code or the inline styles are going to be more work. I suppose the work put in initially with the browser dependant code will make the site easier to maintain.

Oh well, it's bed time now. I'll worry about it in the morning.

[amrosama]

hehe glad you figured it out
good night