javascript - 如何在 CSS 中使用属性？

Question

"Window": {
    backgroundColor: '#fff'
},
"Label": {
    font: {
        fontSize: 32,
        fontWeight: 'bold'
    }
},
"Button": {
    width: '50%',
    height: Ti.UI.SIZE
},
".button": {
    randomProp: 'OK',
    top: window.height * somevalue;
}

我怎样才能使用我Window's Height的设置到我的button's顶部。

Answer 1

您可以通过对象的属性访问对象的样式属性.style。IE：

mybutton.style.top = "10px";

在纯 JS 中获取 Windows 当前高度比较棘手，但 jQuery 库可以轻松做到：

$( 'window' ).height();

如果您不想使用 jQuery，那么这里是仅使用 JS 的方法：JavaScript - 获取浏览器高度

如果您的意图可以通过 CSS 和百分比值实现，那是最好的方法，但我假设您正在尝试附加一些将相对于窗口大小浮动的东西，比如始终位于底部的页脚，没有一些新的 CSS3 选择器在 CSS 中可能会很麻烦，可能应该在 JS 中解决。

Answer 2

为此，您不需要 JavaScript。

您可以使用position: absolute;来设置button相对于视口的位置。

button {position: absolute; top: %/px;}

这是你的 jsFiddle。