Question

I’m very new to javascript (started messing with it today).

I’m trying to change the height of an element (a div) called ‘bar’.
The bar will be part of a chart.

I have no problem hooking up a button to a function which changes the height of the bar. All is working fine, except the bar is growing in the downward direction instead of upward like i wanted.

My solution is to increase the ‘height’ property, and then decrease the ‘top’ property
by the height increase amount.

So I want to do something like:

bar.style.height = newHeight;
bar.style.top = bar.style.top - newHeight;

And that should increase the height upward.
The problem is that I don’t know how to get the current value of bar.style.top

In firebug, if I look at the styles in the html tab, the bar has a top of

top: 122px;

but in the watch list for bar, all i see is the value “” (empty string) for
bar.style.top. I guess my question is – why don’t these values match, and how can i get to the value i want?

And one other thing while I’m asking about this stuff:

I have some CSS for webkit that looks like:

-webkit-animation-timing-function: ease-in-out;

for example. I notice in the watch list for bar, there is no bar.style.-webkit-animation-timeing-function. How do I get at and change values like that?

I normally use asp.net, I was hoping there was something similar to

bar.Style["property"] = "value";

Have I missed something here?

Answer 1

1. Please use document.getElementById('bar') instead of just bar, because bar could mean a lot of different things.
2. The style property allows you to override any style but only gives you style set by a <div style="..."> attribute. See http://www.quirksmode.org/dom/getstyles.html on how to get the current style.