首页 > 网络新闻 > 站长博客 > 正文

getElementById用法全解

时间:2011-04-08 18:08 作者:QQ地带 我要评论

本文将为大家详细讲解在js、PHP、xml中getElementById的用法,以及在ie下、FF(火狐Firefox)下、div中等其他出现问题的解答。

一、js中getElementById函数的用法及调用方法详解

 

js中getElementById函数的用法及调用方法getElementById 返回指定ID的控件(单个)

getElementById在javascript中是个很重要的句子

在表单中用getElementByid只能用id来标识,而不能用name

name一般是用在表单中来用.

getElementbyid可以用来取得表单中的值,比如getelementbyid(id可以来取得名字为id的表单取得的值

 

下面的是在网页中的常规用法:

实例1:

 

新窗口查看复制到剪贴板打印?

<input type=text id="abc" value="kk51.com">  在js中可用a = document.getElementById("abc").value  这样就可以调用表单里的值赋给a  

<input type=text id="abc" value="kk51.com"> 在js中可用a = document.getElementById("abc").value 这样就可以调用表单里的值赋给a<input type=text id="abc" value="kk51.com"><br/>在js中可用a = document.getElementById("abc").value 这样就可以调用表单里的值赋给a

 

实例2:

新窗口查看复制到剪贴板打印?

<div id="divblank"><img src="images/loading.gif" width="16" height="16" /></div>   <script language="javascript">   document.getElementById("divblank").innerHTML="okokokok";   </script>  

<div id="divblank"><img src="images/loading.gif" width="16" height="16" /></div> <script language="javascript"> document.getElementById("divblank").innerHTML="okokokok"; </script><div id="divblank"><img src="images/loading.gif" width="16" height="16" /></div><br/><script language="javascript"><br/>document.getElementById("divblank").innerHTML="okokokok";<br/></script>

 

实例3:

新窗口查看复制到剪贴板打印?

Script language="Javascript">   function CopyStr()   {             document.getElementById("TextBox2").value = document.getElementById("TextBox1").value;   }   </Script>   <form name="form1" method="post" action="Default.aspx" id="form1">   <input name="TextBox1" type="text" id="TextBox1" OnKeyup="CopyStr()" />    <input name="TextBox2" type="text" id="TextBox2" />   </form>  

Script language="Javascript"> function CopyStr(){ document.getElementById("TextBox2").value = document.getElementById("TextBox1").value; }</Script> <form name="form1" method="post" action="Default.aspx" id="form1"> <input name="TextBox1" type="text" id="TextBox1" OnKeyup="CopyStr()" /><br /> <input name="TextBox2" type="text" id="TextBox2" /> </form>Script language="Javascript"><br/>function CopyStr()<br/>{<br/> document.getElementById("TextBox2").value = document.getElementById("TextBox1").value;<br/>}<br/></Script><br/><form name="form1" method="post" action="Default.aspx" id="form1"><br/><input name="TextBox1" type="text" id="TextBox1" OnKeyup="CopyStr()" /><br /><br/><input name="TextBox2" type="text" id="TextBox2" /><br/></form>

以上代码能够很好的工作。

但是,我觉得等号2边的 document.getElementById("...")的代码太长,想在使用前把它们先分别赋给2个变量,再使用它们。

这样还有一个好处,就是当 document.getElementById("...") 在多条语句中使用的时候,节约代码量是很可观的。

再者,如果document.getElementById("..."),要修改,只修改前边的一条语句就可以了。

于是改写为:

新窗口查看复制到剪贴板打印?

var oBox1 = document.getElementById("TextBox1");   var oBox2 = document.getElementById("TextBox2");   oBox2.value = oBox1.value;  

var oBox1 = document.getElementById("TextBox1"); var oBox2 = document.getElementById("TextBox2"); oBox2.value = oBox1.value;var oBox1 = document.getElementById("TextBox1");<br/>var oBox2 = document.getElementById("TextBox2");<br/>oBox2.value = oBox1.value;

但是奇怪的是,程序执行后没有达到预期的结果。

原来,oBox2 本身是一个对象引用类型,要给它的属性赋值,必须先初始化它,然后才能使用。

改成以下代码就可以了:

新窗口查看复制到剪贴板打印?

var oBox1 = document.getElementById("TextBox1");   var oBox2 = new Object(); //声明对象变量   oBox2 = document.getElementById("TextBox2");   oBox2.value = oBox1.value;  

var oBox1 = document.getElementById("TextBox1"); var oBox2 = new Object(); //声明对象变量oBox2 = document.getElementById("TextBox2"); oBox2.value = oBox1.value;var oBox1 = document.getElementById("TextBox1");<br/>var oBox2 = new Object(); //声明对象变量<br/>oBox2 = document.getElementById("TextBox2");<br/>oBox2.value = oBox1.value;

一切又恢复正常了 :)

 


顶一下
(1)
100%
踩一下
(0)
0%

Google提供的广告