Question

我对javascript很新（今天开始搞乱它）。

我正在尝试更改名为“bar”的元素（div）的高度。该栏将成为图表的一部分。

我可以将按钮连接到更改条形高度的功能。一切都很好，除了酒吧向下生长，而不是像我想要的那样向上生长。

我的解决方案是增加'height'属性，然后减少'top'属性由高度增加量。

所以我想做点什么：

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

这应该会增加身高。问题是我不知道如何获得bar.style.top的当前值

在萤火虫中，如果我查看html标签中的样式，那么该栏顶部会有

top: 122px;

但是在bar的监视列表中，我看到的只是值“”（空字符串） bar.style.top。我想我的问题是 - 为什么这些值不匹配，我怎样才能得到我想要的值？

还有一件事，我在问这个问题：

我有一些webkit的CSS看起来像：

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

例如，

。我注意到栏的监视列表中没有bar.style.-webkit-animation-timeing-function。我如何得到并改变这样的值？

我通常使用asp.net，我希望有类似的东西

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

我错过了什么吗？

Answer 1

请使用document.getElementById('bar')而非bar，因为bar可能意味着很多不同的事情。
style属性允许您覆盖任何样式，但仅为您提供由<div style="...">属性设置的样式。有关如何获取当前样式的信息，请参阅http://www.quirksmode.org/dom/getstyles.html。

Answer 2

使用bar.style.WebkitAnimationTimingFunction通过JavaScript访问CSS属性。

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

Answer 3

由于您要使用条形图，我建议使用“bottom”而不是“top”来设置不同的样式。然后，你只需要改变高度。如下所示：

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

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

3 个答案: