指引网

当前位置: 主页 > 网页制作 > JavaScript >

javascript中document.getElementById的常用例子

来源:网络 作者:佚名 点击: 时间:2017-07-02 09:16
[摘要]  在js中document.getElementById是获取指定ID的然后我们可以针对ID进行相关操作,下面我总结了一些常用的例子。

改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:
 

 代码如下 复制代码
document.getElementById(id).attribute=new value

本例改变了 元素的 src 属性:

 代码如下 复制代码

<img id="image" src="smiley.gif" alt="" />
 
<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>

改变 HTML 样式

如需改变 HTML 元素的样式,请使用这个语法:

 代码如下 复制代码

 
document.getElementById(id).style.property=new style

下面的例子会改变

元素的样式:
 
Hello World!
 

 代码如下 复制代码
<script type="text/javascript">
document.getElementById("p2").style.color="blue";
</script>

document.getelementbyid(...)' 为空或不是对象

 

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.111cn.net /1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
    body
    {
        font-family:"宋体";
        font-size:12px;
    }
    </style>
    <script language="javascript" type="text/javascript">
    document.getElementById("divTest").innerHTML="Hello World";
    //页面加载完这段javascript代码的时候,就开始运行了,但是,下面的id为divTest div标签还未加载,所以找不到它
    </script>
</head>
<body>
    <div id="divTest">
    </div>
</body>
</html>

------分隔线----------------------------