getElementById 方法及用法
[转]
顾明思义,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>
- <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>
<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>
getElementById 方法及用法相关推荐
- HTML DOM getElementById() 方法
定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用. 语法 document.getElementById(id) 说明 HTML DOM 定义了多种查找元素 ...
- (转)getElementByID getElementsByName getElementsByTagName用法详解
(转)getElementByID getElementsByName getElementsByTagName用法详解 getElementByID getElementsByName getEle ...
- JavaScript中 querySelector 与 getElementById 方法的区别
1. 概述 在看代码的时候发现基本上都是用 querySelector() 和 querySelectorAll() 来获取元素,疑惑为什么不用 getElementById(). 可能因为自己没用过 ...
- document.getElementById()方法使用
原文地址为: document.getElementById()方法使用 document.getElementById使用 语法:oElement = document .getElementByI ...
- html中getElementById() 方法
html中getElementById方法 定义和用法 语法 说明 获取元素的value 获取元素的innerHTML 定义和用法 getElementById() 方法可返回对拥有指定 ID 的第一 ...
- 直接法 matlab,解线性方程组直接方法matlab用法.doc
解线性方程组直接方法matlab用法 在这章中我们要学习线性方程组的直接法,特别是适合用数学软件在计算机上求解的方法. 2.1 方程组的逆矩阵解法及其MATLAB程序 2.1.3 线性方程组有解的判定 ...
- PHP中魔术方法的用法
PHP中魔术方法的用法 /** PHP把所有以__(两个下划线)开头的类方法当成魔术方法.所以你定义自己的类方法时,不要以 __为前缀. * */// __toString.__set.__get__ ...
- android studio 如何提示方法的用法
方法/步骤1在 Eclipse中鼠标放上去就可以提示方法的用法,实际上Android Studio也可以设置的.如图 Preferences > Editor >Generan> S ...
- python3.5怎么使用-Python3.5常见内置方法参数用法实例详解
本文实例讲述了Python3.5常见内置方法参数用法.分享给大家供大家参考,具体如下: Python的内置方法参数详解网站为:https://docs.python.org/3/library/fun ...
最新文章
- ios 设备方向判断
- lanmp/lamp/lnmp/lnamp一键安装
- 重磅!GitHub 全部源代码被泄露?
- Win32 路径操作API
- [Axios] 基于Promise封装属于自己的Ajax库
- Java讲课笔记21:List接口及其实现类
- STM32 GPIO应用
- Windows 7 beta 1补充汉化文件
- 微信公众号接入百度天气API接口
- linux---动静态库编译及使用
- ThinkPHP自定义错误页面
- 谷歌退出中国是N败俱伤
- linux运维基本英语词汇,13425616_英语词汇的奥秘 高级版.pdf
- flutter 文字颜色渐变
- 【论文阅读】基于光流的快速人体姿态估计
- 电子产品加拿大IC认证(ISED)指南
- 计算机毕业设计ssm农贸市场摊位管理系统c22ux系统+程序+源码+lw+远程部署
- python基_python之地基(一)
- [转]全网最!详!细!tarjan算法讲解
- 如何克服焦虑,不安,紧张