从 javascript var 设置样式值答案

【问题标题】：set a style value from a javascript var从 javascript var 设置样式值
【发布时间】：2014-03-03 22:03:31
【问题描述】：

我想设置表格中单元格的高度，但我想动态设置。我从 javascript 中获取窗口的高度，然后我想将它嵌入到 div 样式中。

<script language="javascript">
var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

if (height>900 )
{
    set_height = "500px";
} else if (height>700 && height<900) {
    set_height = "400px";
} else if (height>500 && height<700) {
    set_height = "300px";
} else if (height>300 && height<500) {
    set_height = "300px";
}
</script>
<table border ="1">
<tr><td>
<div style="height: set_height">
</div>
</td></tr>
</table>

有可能吗？

【问题讨论】：

为您的div 添加一个ID，将您的代码包装在窗口加载函数中，然后使用document.getElementById('yourdiv').style.height = set_height。

标签： javascript html css styles height

【解决方案1】：

如前所述，将 ID 添加到您的 div：

<table border="1">
    <tr>
        <td>
            <div id="mydiv"></div>
        </td>
    </tr>
</table>

将您的 JS 包装在 window.onload 函数中，并通过识别您的 div 添加高度：

window.onload = function () {
    var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
    var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

    if (height > 900) {
        set_height = "500px";
    } else if (height > 700 && height < 900) {
        set_height = "400px";
    } else if (height > 500 && height < 700) {
        set_height = "300px";
    } else if (height > 300 && height < 500) {
        set_height = "300px";
    }

    // Identify your  div by the ID you just put on it and add the height.
    document.getElementById('mydiv').style.height = set_height;
}

如果您希望在调整窗口大小时调用此函数，只需将 window.onload 替换为 window.onresize：

window.onresize = function() {
    // code as above
}

并触发它，使其在窗口加载时工作：

window.onresize();

Fiddle

【讨论】：

【解决方案2】：

实现这一目标的最佳方法是：

<script>
var set_height = "10px"
document.getElementById('test').style.height = set_height;
</script>

<div id='test'></div>

【讨论】：

【解决方案3】：

如果“动态”是指您希望它改变，那么您需要做的是在每次触发特定事件时更改样式值，例如当窗口调整大小时。

类似这样的：

window.onresize = function () {
    var width = isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth;
    var height = isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight;

    if (height > 900) {
        set_height = "500px";
    } else if (height > 700 && height < 900) {
        set_height = "400px";
    } else if (height > 500 && height < 700) {
        set_height = "300px";
    } else if (height > 300 && height < 500) {
        set_height = "300px";
    }

    document.getElementById('myDiv').style.height = set_height;
};
window.onresize();

假设您的 DIV 的 id 值为 myDiv，例如：

<div id="myDiv">
</div>

Here is a working example

注意：我可能误解了这个问题，如果您只想在页面加载时加载它（仅一次），那么您可以改用 window.onload 事件

【讨论】：