document.getElementById失败 <div> 在asp.net中

Question

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

<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中div的height ？

Answer 1

UPDATE

我相信这是因为您在加载正文之前首先加载script标记。 当script首先加载时，它将查找body中尚不存在的元素。 因此无法找到该元素。 您需要将script放在底部。

像这样：

<body>
  <div id="divMap">
    ...
  </div>
  <script>
     ...
  </script>
</body>

您需要先加载元素。 所以元素将存在于体内。

Answer 2

错误说divMap未找到null或undefined什么意味着你在DOM中找不到脚本代码的意思，换句话说，脚本试图在尚未加载时获取该元素。

因此，为了确保在脚本运行之前加载所有DOM元素，您可以在ready函数中添加代码，如：

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

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

Answer 3

我认为问题是你在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>

document.getElementById失败 <div> 在asp.net中

问题描述

3 个解决方案

解决方案1
1 2018-09-14 08:37:46

UPDATE

解决方案2
1 2018-09-14 08:40:03

解决方案3
1 已采纳 2018-09-14 08:40:22

document.getElementById失败 <div> 在asp.net中

问题描述

3 个解决方案

解决方案1 1 2018-09-14 08:37:46

UPDATE

解决方案2 1 2018-09-14 08:40:03

解决方案3 1 已采纳 2018-09-14 08:40:22

解决方案1
1 2018-09-14 08:37:46

解决方案2
1 2018-09-14 08:40:03

解决方案3
1 已采纳 2018-09-14 08:40:22