（不能）在 javascript 中获取元素样式的一部分

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.

Answer 2

Use bar.style.WebkitAnimationTimingFunction to access the CSS property via JavaScript.

http://www.codestyle.org/javascript/dom/css/CSS3ExtensionStyles.shtml

Answer 3

Since you're going for a bar chart, I would suggest styling a bit differently using "bottom" instead of "top". Then, you just have to change the height. Something like the following:

<div style="position: relative; width: 500px; height: 300px; border: 1px solid black;">
    <div style="position: absolute; bottom: 10px; left: 10px; width: 20px; height: 40px; background-color: red;"></div>
    <div style="position: absolute; bottom: 10px; left: 40px; width: 20px; height: 60px; background-color: blue;"></div>
    <div style="position: absolute; bottom: 10px; left: 70px; width: 20px; height: 80px; background-color: green;"></div>
</div>