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)


相关推荐

  • HOOK消息钩子

    HOOK消息钩子大致的过程是当系统I/O上发生一个事件时,系统捕获该事件,并向指定的应用程序的消息队列发送一个消息,应用程序从消息队列中顺次取出一个消息,交由系统调度相应的窗口回调程序进行消息处理。这里可以看到,从OS捕捉到消息开始处理,到最后交还给OS调度回调函数,就像走了一个循环,我自己理解这也是为什么叫做“回调函数”的原因之一。接下来我们要进行的HOOK就是在上面的第二步和第三步之间进行的额外工作。钩子机制允许应用程序截获(且或)处理window消息或特定事件。钩子实际上是一个处理消息的程序段,通过系统调用,把

  • 【OpenCV入门教程之一】 安装OpenCV:OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置

    【OpenCV入门教程之一】 安装OpenCV:OpenCV 3.0、OpenCV 2.4.8、OpenCV 2.4.9 +VS 开发环境配置本系列文章由zhmxy555(毛星云)编写,转载请注明出处。   文章链接: http://blog.csdn.net/poem_qianmo/article/details/19809337 作者:毛星云(浅墨)    邮箱: happylifemxy@163.com  写作当前博文时配套使用OpenCV版本:2.4.8因为读研期间的研究方向是图像处理,所以浅墨这段时间闭门研究了很多OpenCV

  • php fread 逐行读取,php fread函数使用方法总结

    php fread 逐行读取,php fread函数使用方法总结phpfread函数使用方法总结phpfread函数用于读取文件(可安全用于二进制文件),其语法是fread(file,length),参数file必需,指规定要读取打开文件,length必需,指规定要读取的最大字节数。phpfread函数怎么用?定义和用法fread()函数读取文件(可安全用于二进制文件)。语法fread(file,length)参数file必需。规定要读取打开文件。…

  • 【知识点】贴片电阻电容命名和封装「建议收藏」

    【知识点】贴片电阻电容命名和封装「建议收藏」常见的标准零件件主要有以下几种:电阻(R)、排阻(RA或RN)、电感(L)、陶瓷电容(C)、排容(CP)、钽质电容(C)、二极管(D)、晶体管(Q)。一、零件规格:零件规格即零件的外形尺寸,SMT(表面封装技术)发展至今,业界已经形成了一个标准零件系列,各家零件供货商皆是按这一标准制造。标准零件之尺寸规格有英制与公制两种表示方法,参照下面的常见贴片电阻尺寸表(1inch=25.4mm=

  • 一文看懂25个神经网络模型

    一文看懂25个神经网络模型1.引言在深度学习十分火热的今天,不时会涌现出各种新型的人工神经网络,想要实时了解这些新型神经网络的架构还真是不容易。光是知道各式各样的神经网络模型缩写(如:DCIGN、BiLSTM、DCGAN……还有哪些?),就已经让人招架不住了。因此,这里整理出一份清单来梳理所有这些架构。其中大部分是人工神经网络,也有一些完全不同的怪物。尽管所有这些架构都各不相同、功能独特,当我在画它们的节点图时……其中潜在

  • Springboot项目搭建(前端到数据库,超详细)

    Springboot项目搭建(前端到数据库,超详细)下面详细谈谈我的第一个springboot项目搭建,希望会给还在摸索的同学一点帮助。项目说明:开发环境:Eclipse4.42框架:Springboot工具:Maven前端:Html、Thymeleaf后台:Hibernate数据库:Mysql为什么要搭建Springboot项目?教科书式的阐述这里就不说了,我就总结为两个词语“简单、方便”。为了更…

发表回复

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

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