Javascript 在创建Id之前使用getElementById
以下代码起作用：Javascript 在创建Id之前使用getElementById,javascript,html,Javascript,Html,以下代码起作用： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Orientation Test</title> <style> </style> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-m
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Orientation Test</title>
<style>
</style>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="initial-scale=1, user-scalable=no">
<style type='text/css'>
body {font-family:Helvetica,FreeSans,Arial,sans; font-size:18px;}
h1 {margin:0; font-size:22px;}
label {font-weight:bold; display:inline-block; width:50%;}
#wrapper {width:100%; height:100%;}
</style>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Device motion test</h1>
<p><label for="aX">aX</label><span id="aX"></span></p>
<p><label for="aY">aY</label><span id="aY"></span></p>
<p><label for="aZ">aZ</label><span id="aZ"></span></p>
<p id = "change">0</p>
</div>
</body>
</html>
定向测试
正文{字体系列：Helvetica、FreeSans、Arial、sans；字体大小：18px；}
h1{边距：0；字体大小：22px；}
标签{字体重量：粗体；显示：内联块；宽度：50%；}
#包装{宽度：100%；高度：100%；}
设备运动测试
斧头
嗯
阿兹
0
var s$ = function(e) {
return document.getElementById(e);
};
if (window.DeviceMotionEvent) {
alert('devicemotion supported');
window.addEventListener('devicemotion', function(ev) {
var acc = ev.accelerationIncludingGravity;
dmHdlr(acc.x, acc.y, acc.z);
}, false);
}
else {
alert("devicemotion not supported on your device or browser.");
}
var lastDM = new Date().getTime();
function dmHdlr(aX, aY, aZ) {
var currDM = new Date().getTime();
//if (currDM < lastDM + 1000) {return;}
lastDM = currDM;
s$('aX').innerHTML = aX ? aX.toFixed(3) : '?';
s$('aY').innerHTML = aY ? aY.toFixed(3) : '?';
s$('aZ').innerHTML = aZ ? aZ.toFixed(3) : '?';
}
var s$=函数（e）{
返回文档.getElementById（e）；
};
if（window.DeviceMotionEvent）{
警报（“支持设备移动”）；
window.addEventListener（'devicemotion'，函数（ev）{
var acc=电动汽车加速度，包括重力；
dmHdlr（附件x、附件y、附件z）；
}，假）；
}
否则{
警报（“您的设备或浏览器不支持devicemotion。”）；
}
var lastDM=new Date（）.getTime（）；
功能dmHdlr（aX、aY、aZ）{
var currDM=new Date（）.getTime（）；
//如果（currDM谢谢在
if (window.DeviceMotionEvent) {...
被触发。此时主体已经呈现，并且id存在于DOM中，因此没有问题。只要调用函数时id存在，就可以首先声明函数。在本例中，确实如此。我可以说，对于Chrome、Firefox和IE9浏览器，所有这些都遵循解析html和执行javascript的顺序 浏览器首先加载html并从页面头部解析其所有标记。在您的html中，它将解析标题标记，然后是元标记，然后是样式标记等。它还解析您在中提到的javascript文件，但不执行 然后构建DOM层次结构，并将CSS属性设置为DOM元素 最后，当DOM就位时，它执行javascript
if (window.DeviceMotionEvent) {
...
window.addEventListener('devicemotion', function(ev) {
...
}
这就是为什么浏览器在
main.jsifgetElementById（）devicemotion