顾明思义,get-Element-By-Id,就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单就是给每个标签分配一个ID号:
document.getElementById("link").href;
document.getElementById("link").target;
document.getElementById("img").src;
document.getElementById("img").width;
document.getElementById("img").height;
document.getElementById("input").value;
那么如何取得<div></div>以及<a></a>之间的值呢?如<div id="div">aaa</div>中的aaa,<a href="#" id="link">bbb</a>中的bbb,也很简单,利用innerHTML就可以了:
document.getElementById("div").innerHTML;
document.getElementById("link").innerHTML;
getElementById 方法
返回具有指定 ID 属性值的第一个对象的一个引用。
语法
oElement = document.getElementById(sIDValue)
参数
sIDValue 必选项。指明 ID 属性值的字符串
返回值
返回 ID 属性值与指定值相同的第一个对象。
注释
如果 ID 属于一个集合, getElementById 方法返回集合中的第一个对象。
getElementById 方法与使用 all 集合上的 item 方法等同。例如,以下代码样本表示如何从 document 对象中取回 ID 为 oDiv 的第一个要素。
使用 DHTML 对象模型:
var oVDiv = document.body.all.item("oDiv");
使用文档对象模型 (DOM) :
var oVDiv = document.getElementById("oDiv");
示例
以下例子表示如何使用 getElementById 方法返回 ID 属性值 oDiv 的第一次出现。
<script>
function fnGetId(){
// Returns the first DIV element in the collection.
var oVDiv=document.getElementById("oDiv1");
}
</script>
<DIV ID="oDiv1">Div #1</DIV>
<DIV ID="oDiv2">Div #2</DIV>
<DIV ID="oDiv3">Div #3</DIV>
<INPUT TYPE="button" VALUE="Get Names" οnclick="fnGetId()">
getElementById 方法
返回具有指定 ID 属性值的第一个 比如说有个网页中有个 text 框的 id 叫 text1
getElementById(text1) 就能得到这个 text1 框的对象 , 并使用 text 框的所有属性和方法
这个是 JS 的一个方法,意思是通过控件 ID 取得元素的值,如一个 form 里包函 text 、 label 等,他们都是 FORM 的元素,有一个分配的 ID , getElementById() 是取得这些元素的 text 值的。
这个是 JS 的一个方法,意思是通过控件 ID 取得元素的值,如一个 form 里包函 text 、 label 等,他们都是 FORM 的元素,有一个分配的 ID , getElementById() 是取得这些元素的 text 值的。
程序举例
</html>
- <html>
- <head>
- <script type= "text/javascript" >
- function alignRow()
- {
- var x=document.getElementById( 'myTable' ).rows
- x[0].align= "right"
- }
- </script>
- </head>
- <body>
- <table width= "60%" id= "myTable" border= "1" >
- <tr>
- <td>行1 单元格1</td>
- <td>行1 单元格2</td>
- </tr>
- <tr>
- <td>行2 单元格1</td>
- <td>行2 单元格2</td>
- </tr>
- <tr>
- <td>行3 单元格1</td>
- <td>行3 单元格2</td>
- </tr>
- </table>
- <form>
- <input type= "button" οnclick= "alignRow()" value= "右对齐第一行文字" >
- </form>
- </body>
- </html>
</html>
改变 colspan 的值
<html>
<head>
<script type="text/javascript">
function setColSpan()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].colSpan="2"
x[1].colSpan="6"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td colspan="4"> 单元格 1</td>
<td colspan="4"> 单元格 2</td>
</tr>
<tr>
<td> 单元格 3</td>
<td> 单元格 4</td>
<td> 单元格 5</td>
<td> 单元格 6</td>
<td> 单元格 7</td>
<td> 单元格 8</td>
<td> 单元格 9</td>
<td> 单元格 10</td>
</tr>
</table>
<form>
<input type="button" οnclick="setColSpan()" value=" 改变 colspan 值 ">
</form>
</body>
支队一个单元隔进行对齐
<html>
<head>
<script type="text/javascript">
function alignCell()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].align="center"
}
</script>
</head>
<body>
<table id="myTable" border="1" width="100%">
<tr>
<td> 单元格 1</td>
<td> 单元格 2</td>
</tr>
<tr>
<td> 单元格 3</td>
<td> 单元格 4</td>
</tr>
</table>
<form>
<input type="button" οnclick="alignCell()" value=" 居中对齐第一个单元格的内容 ">
</form>
</body>