Question

我使用以下脚本在包含Google Map控件的height上设置div：

<script>
    var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
    //alert("Height:" + height)
    document.getElementById('divMap').setAttribute("style", "width:" + height);
</script>

再进一步定义div：

    <div id="divMap" class="col-md-6" style="min-height: 800px; height:100%">
        <map:GoogleMap ID="GoogleMap1" runat="server" Width="100%" Height="100%">
        </map:GoogleMap>

        <map:GoogleMarkers ID="GoogleMarkers1" TargetControlID="GoogleMap1" runat="server" OnClick="GoogleMarkers1_Click" />
    </div>

该脚本在加载时效果很好。我得到了浏览器窗口的height。

但是，getElementById()总是失败。

就像脚本运行时div不存在一样。如果我选择调试页面，则仅显示<script>标签。

我想念什么，但是呢？

还是有另一种方法可以在asp.net中设置height的{{1}}？

Answer 1

该错误表明找不到divMap或null undefined，这意味着您无法在DOM中找到脚本代码，这意味着该脚本试图在尚未加载时获取元素。

因此，要确保在脚本运行之前已加载所有DOM元素，可以将代码添加到ready函数中，例如：

document.addEventListener("DOMContentLoaded", function(event) { 
     //Your code here
});

注意：：如果您可以控制页面结构，则可以将JS和HTML中的HTML分开，因为混合它们不是一个好习惯。

Answer 2

我认为问题在于您正在尝试在DOM中插入div。试试这个：

<html>
<head>
</head>
<body>
<div id="divMap" class="col-md-6" style="min-height: 800px; height:100%">
<map:GoogleMap ID="GoogleMap1" runat="server" Width="100%" Height="100%">
</map:GoogleMap>
<map:GoogleMarkers ID="GoogleMarkers1" TargetControlID="GoogleMap1" runat="server" OnClick="GoogleMarkers1_Click" />
</div>

<script>
(function() {
   /var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
    //alert("Height:" + height)
    document.getElementById('divMap').setAttribute("style", "width:" + height);

})();
</script>
</body>
</html>

asp.net中<div>上的document.getElementById失败

2 个答案: