位置:电子教程 > HTML DOM 教程 (如果看不到内容请使用360浏览器) 推荐学习资源
HTML DOM 节点
HTML DOM 方法
HTML DOM 属性
HTML DOM 访问
HTML DOM - 修改
HTML DOM - 元素
HTML DOM - 事件
HTML DOM 导航
HTML DOM 总结
当前阅读教程:HTML DOM 教程 > 使用事件
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 创建新的 HTML 元素 下一篇: HTML DOM - 元素

HTML DOM 允许您在事件发生时执行代码。

HTML 元素"有事情发生"时,浏览器就会生成事件:

l  在元素上点击

l  加载页面

l  改变输入字段

下面两个例子在按钮被点击时改变 <body> 元素的背景色:

示例

小白教程网www.2d5.net

1:由函数执行代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击改变背景色(2d5.net小白教程网)</title>
</head>
<body>
 
     <script>
     function ChangeBackground()
     {
             document.body.style.backgroundColor = "gray";
     }
     </script>
 
     <input type="button" onclick="ChangeBackground()" value="修改背景颜色" />
    
</body>
</html>

效果图

小白教程网www.2d5.net

image.png


示例

小白教程网www.2d5.net

2:在按钮被点击时改变 <body> 元素的背景色

<input type="button"
     onclick="document.body.style.backgroundColor='gray';"
     value="修改背景颜色">

 

 

示例

小白教程网www.2d5.net

3:下面的例子在按钮被点击时改变 <p> 元素的文本:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮点击改变元素的文本(2d5.net小白教程网)</title>
</head>
<body>
 
     <p id="p1">Hello world!</p>
    
     <script>
     function ChangeText()
     {
             document.getElementById("p1").innerHTML="黄菊华老师,你好";
     }
     </script>
 
     <input type="button" onclick="ChangeText()" value="修改文本" />
    
</body>
</html>

效果图

小白教程网www.2d5.net

image.png


上一篇: 创建新的 HTML 元素 下一篇: HTML DOM - 元素
毕业设计网             广告联系QQ:45157718(微信同号)