getElementById 的用法及实例(2)

getElementById 方法
返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的idtext1
getElementById(text1)
就能得到这个text1框的对象,并使用text框的所有属性和方法

.....................................................................

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

............................................................................

document.formname.name.value
document.getElementById("name");

这两个话的意思一样

..................................................................................
程序举例

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

转载于:https://www.cnblogs.com/tiantangwater/archive/2008/12/24/1361675.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值