本节内容:
getElementById实例
说明:
getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。
用这个方法基本上可以控制页面所有标签,条件很简单,就是给每个标签分配一个ID号。
返回具有指定ID属性值的第一个对象的一个引用。
语法:
 
Element = document.getElementByIdx_x_x(“id”)
获得ID值=id的所有属性和方法
JS中经常使用它通过控件ID取得元素的值,如一个form里包含text、label等,他们都是FORM的元素,有一个分配的ID,getElementById()是取得这些元素的text值的。
 
例1:
 
复制代码 代码示例:
<html>  
  <head>  
  </head>  
  <body>  
    <input id="inTag" name="inName" value="bijian" type="text" />  
    <input type="submit" value="获取值" onClick="getValue()"/>  
  </body>  
  <script language="
javascript">  
     window.onload = function run(){     
         var inTag = document.getElementByIdx_x("inTag");   
                  inTag.value = "hello!";  
     }  
      
     function getValue() {  
              var inTag = document.getElementByIdx_x("inTag");  
              alert(inTag.value);  
     }  
  </script>  
</html>  
 
例2:
 
复制代码 代码示例:
<html>  
  <head>  
      <title>getElementById-www.jb200.com</title>  
  </head>  
  <body>  
    <a id="mr" href="http://www.baidu.com/">
百度</a>  
    <form name="myform">  
        <input type="button" value="更换连接" onClick="change()"/>  
    </form>  
  </body>  
  <script language="javascript">  
     function change() {  
             document.getElementByIdx_x("mr").innerHTML = "
脚本学堂";  
             document.getElementByIdx_x("mr").href="http://www.jb200.com/";  
     }  
  </script>  
</html>  
 
例3:
 
复制代码 代码示例:
<html>  
  <head>  
      <title>getElementById-www.jb200.com</title>  
  </head>  
  <body>  
    <h1 id="divTest" onmousemove="s()" onmouseout="reset()" align="center">这是一个有感觉的标记</h1>  
  </body>  
  <script language="javascript">  
     function reset() {  
             var divTest = document.getElementByIdx_x("divTest");  
             divTest.innerHTML = "这是一个有感觉的标记";  
     }  
     function s()  {  
             var divTest = document.getElementByIdx_x("divTest");  
             divTest.innerHTML = "老鼠来了";  
     }  
  </script>  
</html>  
 
例4:
 
复制代码 代码示例:
<html>  
  <head>  
      <title>getElementById4</title>  
  </head>  
  <body>  
    <font ID=main_title size=6><b>虚拟网络世界</b></font>  
  </body>  
  <script language="javascript">  
     var n = 0;  
     function changefontcolor() {  
             nn=n%4;  
             switch(n) {  
                 case 0:  
                         main_title.color="red";  
                         
break;  
                 case 1:  
                         main_title.color="green";  
                         break;  
                 case 2:  
                         main_title.color="blue";  
                         break;  
                 case 3:  
                         main_title.color="yellow";  
             }  
             n++;  
     }  
     //定时执行函数每秒钟调用changefontcolor()函数一次,改变大标题的颜色  
     setInterval("changefontcolor()",1000);  
  </script>  
</html>  
 
例5:
 
复制代码 代码示例:
<html>  
  <head>  
      <title>getElementById5</title>  
  </head>  
  <body onKeypress="showCapture()">  
    <h1 ID="num" align="center">0000</h1>  
  </body>  
  <script language="javascript">  
       var r;  
       function showNextNum() {  
               var m_num=Math.floor(Math.random()*(3000-1000))+1000;  
               num.innerHTML = m_num;  
       }  
       function showCapture() {  
               clearTimeout(r);  
       }  
     r = setInterval("showNextNum()",100);  
  </script>  
</html>