DOM 简单介绍与事件简单介绍
DOM:控制html文档的内容
<img id= "light" src="../img/off.gif">
<script>
// 通过id获取元素对象
var light = document.getElementById("light");
alert("点击图片");
light.src="../img/on.gif";
</script>
事件简单学习
<script>
function fun() {
alert("我被点了")
}
</script>
<img src="../img/off.gif" onclick="fun();"> // 耦合度太高
<img id="light2" src="../img/off.gif">
<script>
function fun() {
alert("我被点了")
}
// 1.获取light2对象
var light2 = document.getElementById("light2");
// 2.绑定事件
light2.onclick = fun;
</script>
完成一个小案例
<img id="light" src="../img/off.gif">
<script>
/**
* 分析:
* 1.获取图片对象
* 2.绑定单机事件
* 3.每次点击切换图片
* 规则:如果灯是开的 on ,切换图片为 off
* 如果灯是关的 off ,切换图片为 on
* 使用标记flag来完成
*/
// 1.获取图片对象
var light = document.getElementById("light");
var flag = false; // 代表灯是灭的,off图片
// 2.绑定单机事件
light.οnclick=function(){
if (flag){ // 判断,如果灯开的,就关掉
light.src="../img/off.gif";
flag = false;
}else{ // 判断,如果灯关的,就打开
light.src="../img/on.gif";
flag = true;
原文地址:https://www.jb51.cc/wenti/3286963.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。