javascript - 使用内联 CSS 和调用 javascript 函数动态设置 div 高度

Question

出于我的目的，我需要尽快设置 div 高度。

使用document.ready()事件的速度不够快，所以想设置div的内联CSS样式。

怎么能做到这样？

<div id="map-container" style="height:javascript(getwindowheight)px;">
    <div id="map">

    </div>
</div>

function getwindowsheight() {
    return window.height;
}

有什么建议么？

Answer 1

由于您希望它是动态的，因此您需要注意以下事件：

• 窗口调整大小
• 窗口准备好了

首先设置您的 HTML：

<div id="map-container"></div>

然后在你的 JavaScript 中，设置一个函数来检测这些：

var applyMapContainerHeight = function() {
  var height = $(window).height();
  $("#map-container").height(height);
};

document.ready(function() {
  applyMapContainerHeight();
});

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

Answer 2

如果 jQuery 是脚本文件包含在 HTML 的最开头，请在div声明之后放置一些脚本：

<div id="map-container">
    <div id="map">

    </div>
</div>
<script type="text/javascript">
    $("#map-container").height(getwindowsheight());
    function getwindowsheight() {
        return window.height;
    }
</script>

Answer 3

然后不要使用 document.ready

只需在 div 之后执行你的 js

<div id="map-container">
    <div id="map">

    </div>
</div>
<script type="text/javascript">
$('#map-container').css({ height: 'your height'});
</script>

Answer 4

<div id="map-container">
    <div id="map">
    </div>
</div>

<script type="text/javascript">
document.getElementById("map-container").style.height= $(window).height() + "px";
</script>