Javascript document.getElementById在<;上失败;部门>;在asp.net中
我使用以下脚本在包含谷歌地图控件的Javascript document.getElementById在<;上失败;部门>;在asp.net中,javascript,c#,asp.net,Javascript,C#,Asp.net,我使用以下脚本在包含谷歌地图控件的div上设置height: <script> var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; //alert("Height:" + height) document.getEl
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>
这个脚本在加载时工作得非常好。我得到浏览器窗口的高度
但是,getElementById()
总是失败
就像脚本运行时,div
不存在一样。如果我选择调试页面,只会显示
标记
我错过了什么,但是什么
或者有没有其他方法可以在asp.net中设置div
的高度
我相信这是因为您在加载正文之前先加载脚本标记。首先加载脚本时,它将查找正文中尚不存在的元素。因此它找不到元素。您需要将脚本
放在底部
像这样:
<body>
<div id="divMap">
...
</div>
<script>
...
</script>
</body>
...
...
您需要先让元素加载。因此元素将存在于主体中。错误表示未找到divMap
null
或undefined
什么意思是在DOM中找不到脚本代码?换句话说,脚本在未加载元素时尝试获取该元素
因此,为了确保在脚本运行之前加载所有DOM元素,您可以在ready函数中添加代码,如:
document.addEventListener("DOMContentLoaded", function(event) {
//Your code here
});
注意:如果你可以控制页面结构,你可以在正文中将JS和HTML分开,因为混合使用它们不是一个好的做法。我认为问题是你试图在div进入DOM之前访问它。试试这个:
<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>
(功能(){
/var height=window.innerHeight?window.innerHeight:document.documentElement.clientHeight?document.documentElement.clientHeight:screen.height;
//警报(“高度:”+高度)
document.getElementById('divMap').setAttribute(“样式”,“宽度:”+高度);
})();
您可能需要将脚本放入(function(){/*您的脚本*/})
。将脚本放在正文的末尾
@ZakariaAcharki好吧,我没有使用jQuery,但是像上面的评论那样将脚本放在自我执行函数中的想法可能是错误的,但是将脚本放在正文的底部应该可以做到。是的,我看到@SeM,但是为什么不使用内置事件,比如DOMContentLoaded
事件,这样我们就不必将代码移动到任何地方(请查看下面的答案)。关键在于:“再往下一点,定义了div
”——您找不到divMap
,因为它不存在。谢谢大家。我没有意识到在加载过程中以这种方式执行的
。这只是另一种方式。根据错误消息,document.getElementById('divMap')
是未定义的或null
,因此它没有帮助。您能提供完整的代码吗?所以我们可以更容易地调试。我想我明白了为什么。这是因为您先加载脚本。当脚本首先加载时,dom还不存在。因此,您需要将脚本放在底部。让元素先加载。
<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>