本节内容:
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>