为什么这么实现不了。我的想法是:getElementById()获取对象,然后引用对象实现属性的更改。
最后,关于怎么修改可以不重复敲呢?
那就取出来吧,再创一个<script>便签,放<body> 下 </p>标签之后即可,如下:
<p>...</p> <script> var mychar = document.getElementById("con"); </script> <form>...</form>
实测,可行!
<!--知道的不是很多,就挑些我知道的讲讲,本人小菜鸟一个,若以下有遗漏之处,还望大神指点 。-->
首先复习下前两节讲的内容,通过document.getElementById("id")可以获取元素内容,但具有的该id元素位于下面时,根据浏览器从上而下(同一优先级)解析顺序可以知道,浏览器正在读取<head>中的<script>命令,而该命令却是要调需用<body>中的id 便签内容,此时浏览器并不知道<body>到底写了什么鬼,正如另一位同学说的,浏览器顿时就二了。
所以元素不能正常获取,输出值为 : null
eg:
<html> <head> <script> var mychar = document.getElementById("con"); document.write(mychar); //输出 null </script> </head> <body> <p id="con"> 你找不着我^-^ </p> <body> </html>
到这可能又有问题了,先看下这个例子:
<html> <head> <title>display</title> <script type="text/javascript"> function hidetext() { var mychar = document.getElementById("con"); mychar.style.display="none"; } </script> </head> <body> <h1>JavaScript</h1> <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p> <form> <input type="button" onclick="hidetext()" value="隐藏内容" /> </form> </body> </html>
从上面可以看出document.getElementById("con")依旧位于被获取对象id 之前,可这为什么不显示null却能正常显示呢,关键原因是有他在:
从第一章最后一节有讲过关于函数调用说明,函数不能自动执行的, 执行需调用,到这大概就清楚了,这例子能正常运行原因在于使用了function hidetext() 函数 ,使得浏览器运行到<script>内 funciton 函数时不会立即执行解析出结果,函数会等待被调用,浏览器会继续按顺序解析下去,直到<button>出现,触发按钮,此时所有内容以表达,而函数下的 document.getElementById("con") 就静静等待直到被运行 ~ perfect
update:刚把<form></form>放<p></p>之前了,功能正常,这是说明<body>内优先级平等吗,求解?
获得的 是你所要改变的具体位置标签
获取的是你所要改变的具体位置标签
不是很懂,但是有解决方法,我的猜想是js加载的时候con还没有加载完成,所有你点击的时候get不到con这个元素,将script代码放到body的最下面就可以了。