getElementById 方法及用法

2022-09-14 19:35:57 浏览数 (1)

大家好，又见面了，我是你们的朋友全栈君。

顾明思义，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值的。

程序举例

  1. <html>
  2. <head>
  3. <script type=“text/javascript”>
  4. function alignRow()
  5. {
  6. var x=document.getElementById(‘myTable’).rows
  7. x[0].align=“right”
  9. }
  10. </script>
  11. </head>
  13. <body>
  14. <table width=“60%” id=“myTable” border=“1”>
  15. <tr>
  16. <td>行1 单元格1</td>
  17. <td>行1 单元格2</td>
  18. </tr>
  19. <tr>
  20. <td>行2 单元格1</td>
  21. <td>行2 单元格2</td>
  22. </tr>
  23. <tr>
  24. <td>行3 单元格1</td>
  25. <td>行3 单元格2</td>
  26. </tr>
  27. </table>
  28. <form>
  29. <input type=“button” οnclick=“alignRow()” value=“右对齐第一行文字”>
  30. </form>
  31. </body>
  33. </html>

支队一个单元隔进行对齐

<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>

</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>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159603.html原文链接：https://javaforall.cn

javascript html java jquery

0 人点赞