2

我想在 css 表中使用 js 中计算的数字。

我有这个js：

<script type="text/javascript">

//js cut out here

//document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
alert('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');

//-->
</script>

有警告，其中 viewportwidth 显示浏览器的宽度，viewportheight 显示浏览器窗口的高度。我想使用这些数字是这样的样式表：

<style type="text/css">
html, body, 
#page {
    width:   100%;
    height:  100%;
    margin:  0;
}
#map_canvas {
    width:   (viewportwidth-200) px;
    height:  viewportheight;
}
#sidebar {
    width:200px;
    height:viewportheight px;
    overflow:auto;
}
</style>

有可能做到这一点吗？

我发现了这个：将 Javascript 变量解析为 CSS 变量

但我无法让它工作

4

4 回答 4

4

您可以使用JavaScript修改特定元素的样式：

document.getElementById('map_canvas').style.width = "800px";
于 2012-08-20T16:33:07.043 回答
2

您不能使用 JS 更改 CSS 样式表。但是，您可以通过将内联样式应用于元素或<style>在原始样式表之后附加新标签来覆盖样式表。

使用你的viewportheight变量...

选项一：

myEl.style.height = viewportheight + 'px';

选项二：

var style = document.createElement('style');
style.type = 'text/css'; style.rel = 'stylesheet';
style.innerHTML = '#map_canvas { height: ' + viewportheight + 'px; }';
document.head.appendChild(style);

此外，LESS可能会引起一些兴趣。

于 2012-08-20T16:28:26.423 回答
0

如果你有能力使用 jQuery，这是你最好的选择。该.width()函数将为您提供对象的当前宽度，包括窗口，也可用于设置对象的宽度。您还可以在事件上设置一个处理程序，.resize()以在对象（包括窗口）发生调整大小时也不断调整对象的大小。

我创建了一个jsFiddle演示代码。

在示例中，我在文档加载时设置了大小，然后在窗口调整大小事件上设置了一个处理程序，以不断调整div示例中的大小。这是为您实际调整大小的 JavaScript/jQuery 代码。

$(document).ready(function() {
    adjustCanvasSize();

    $(window).resize(function() {
        adjustCanvasSize();
    });
});

function adjustCanvasSize() {
    var win = $(window);
    var width = win.width();
    var height = win.height();   
    var canvas = $('#map_canvas');
    canvas.width(width - 200);
    canvas.height(height);
}
于 2012-08-20T16:42:57.073 回答
0

目前，您能做的最好的事情就是在 JavaScript 中设置样式（并在视口更改时更新它）。CSS3 确实添加了vw和vh单位，让您分别指定相对于视口宽度和高度的长度。结合calc功能，你可以为所欲为。不过，这实际上只是为了供将来参考，因为它们都是实验性的，旧版浏览器尚不支持（请参阅http://caniuse.com/viewport-units和http://caniuse.com/calc）。

另外，请记住vw和vh是百分比，所以整个宽度是100vw。

<style type="text/css">
html, body, 
#page {
    width:   100%;
    height:  100%;
    margin:  0;
}
#map_canvas {
    width:  -webkit-calc(100vw - 200px);
    width:  -moz-calc(100vw - 200px);
    width:  calc(100vw - 200px);
    height: 100vh;
}
#sidebar {
    width:    200px;
    height:   100vh;
    overflow: auto;
}
</style>
于 2012-08-20T17:11:02.563 回答