getElementById的用法
编程技术 / houtizong 发布于 3年前 93
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</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 = "金山123"; document.getElementByIdx_x("mr").href="http://123.duba.net/"; } </script></html>
实例3：
<html> <head> <title>getElementById</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() { n=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> 请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
