getElementById 方法及用法

getElementById 方法及用法[转]顾明思义,get-Element-By-Id,就是通过ID来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签,条件很简单就是给每个标签分配一个ID号:document.getElementById(“link”).href;document.getElementById(“link”).target;document.getElementById(“i

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

[转]

顾明思义,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框的idtext1
getElementById(text1)
就能得到这个text1框的对象,并使用text框的所有属性和方法

    

这个是JS的一个方法,意思是通过控件ID取得元素的值,如一个form里包函textlabel等,他们都是FORM的元素,有一个分配的IDgetElementById()是取得这些元素的text值的。

 

这个是JS的一个方法,意思是通过控件ID取得元素的值,如一个form里包函textlabel等,他们都是FORM的元素,有一个分配的IDgetElementById()是取得这些元素的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”
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. <table width=“60%” id=“myTable” border=“1”>
  13. <tr>
  14. <td>行1 单元格1</td>
  15. <td>行1 单元格2</td>
  16. </tr>
  17. <tr>
  18. <td>行2 单元格1</td>
  19. <td>行2 单元格2</td>
  20. </tr>
  21. <tr>
  22. <td>行3 单元格1</td>
  23. <td>行3 单元格2</td>
  24. </tr>
  25. </table>
  26. <form>
  27. <input type=“button” οnclick=“alignRow()” value=“右对齐第一行文字”>
  28. </form>
  29. </body>
  30. </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>

                

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159603.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Linux如何安装PHPMyAdmin

    Linux如何安装PHPMyAdmin1,我们要以root帐号登入。2,PHP支持模块安装。在CentOS操作系统安装完毕后,其实PHP支持模块并没有安装上去,如果想使用PhpMyAdmin,首先需要安装PHP支持模块,我们需要两个PHP支持模块:一,“PHPscriptinglanguageforcreatingdynamicwebsites”;二,“AmoduleforPHPapplicationsthat

  • NO6_no6625

    NO6_no66251、自建yum仓库,分别为网络源和本地源2、编译安装http2.4,实现可以正常访问,并将编译步骤和结果提交。3、创建一个2G的文件系统,块大小为2048byte,预留1%可用空间,文件系统ext4,卷标为TEST,要求此分区开机后自动挂载至/test目录,且默认有acl挂载选项4、创建一个至少有两个PV组成的大小为20G的名为testvg的VG;要求PE大小为16MB,而后在卷组中创建大小为5G的逻辑卷testlv;挂载至/users目录…

    2022年10月22日
  • Cisco 管理Mac 地址表

    Cisco 管理Mac 地址表

  • java面试题库app_java的面试宝典

    java面试题库app_java的面试宝典https://blog.csdn.net/tongshuixu8025/article/details/79949157[添加链接描述]加粗样式

  • 免费手机号码归属地API查询接口

    免费手机号码归属地API查询接口

    2021年10月17日
  • strlen函数用法举例(strlen字符串)

    strlen(char*)函数求的是字符串的实际长度,它求得方法是从开始到遇到第一个’\0’,如果你只定义没有给它赋初值,这个结果是不定的,它会从aa首地址一直找下去,直到遇到’\0’停止。charaa[10];cout<charaa[10]={‘\0’};cout<charaa[10]=”jun”;cout<而sizeof()返回的是变量声明后所占的内存数,不是实际长…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号