DOM事件

这些示例展示了JavaScript如何处理按钮点击事件,修改DOM元素内容,改变图片属性,显示图片,实现排他事件以及修改input字段和按钮的属性值。通过这些例子,可以深入理解JavaScript在网页交互中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

按钮点击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>按钮点击事件</title>
	</head>
	<body>
		<input type="button" value="按钮" id="btn"/> 
		<script type="text/javascript">
			/* 文档 -- 获取元素属性id值将信息赋值给 变量btn */
			var btn = document.getElementById("btn");
			//btn.单击事件调用函数执行弹出窗口
			btn.onclick = function(){
				alert("123456");
			}
		</script>		
	</body>
</html>

单击按钮修改div标签内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单击按钮修改div标签内容</title>
	</head>
	<body>
		<input type="button"  id="btn" value="单击显示div标签内容" />
		<div id="d1"></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<script type="text/javascript">
		//单独给一个div标签添加内容
			//根据id属性获取此文档中的元素 添加注册事件 调用函数
			document.getElementById("btn").onclick=function(){
			//根据id属性获取此文档中的元素 添加文本内容
			//document.getElementById("d1").innerText="就是个div标签";
			//根据标签名称获取元素
			var div = document.getElementsByTagName("div");
			for(var i = 0; i < div.length; i++){
				div[i].innerText="就是个div标签";
			}
			
			}
		</script>
	</body>
</html>

单击按钮修改图片属性中的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单击按钮修改图片属性中的内容</title>
	</head>
	<body>
		<input type="button" id="btn" value="按钮" />
		<img src="2.jpg" width="400" height="400" title="" border=""/>
		<img src="3.jpg" width="400" height="400" title="" border=""/>
		<img src="4.jpg" width="400" height="400" title="" border=""/>
		<script type="text/javascript">
			document.getElementById('btn').onclick=function(){
				var img = document.getElementsByTagName('img');
				console.log(img);
				for(var i=0; i<img.length; i++){
					img[i].width=300;
					img[i].height=200;
				}
			}
		</script>
	</body>
</html>

显示图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示图片</title>
	</head>
	<body>
		<input type="button" value="显示图片" id="btn"/> 
		<img src="" id="img"/>
		<script type="text/javascript">
			/*在js代码中设置图片的宽300高200*/
			//根据id属性值获取次文档中的元素input
			var btn = document.getElementById("btn");
			//根据id属性值获取次文档中的元素img
			var img = document.getElementById("img");
			//当对btn添加注册事件时 调用这个函数  并对img的src属性进行赋值
			btn.onclick = function(){
				img.src= "2.jpg";
				img.width = "300";
				img.heght="200";
			}
		</script>
	</body>
</html>

单击按钮排他事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单击按钮排他事件</title>
	</head>
	<body>
		<input type="button" value="绿了"/>
		<input type="button" value="绿了"/>
		<input type="button" value="绿了"/>
		<input type="button" value="绿了"/>
		<input type="button" value="绿了"/>
		<input type="button" value="绿了"/>
		<script type="text/javascript">
		//根据标签名获取指定标签
		var input = document.getElementsByTagName('input');
		console.log(input);//数组对象
		for(var i = 0; i < input.length; i++){
			//对每一个input标签注册事件  onclick
			input[i].onclick = function(){
				for(var j = 0; j < input.length;j++){
					input[j].value="绿了";
				}
				this.value = "红了";
			}
		}
		</script>
	</body>
</html>

单击按钮修改input中value的默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单击按钮修改input中value的默认值</title>
	</head>
	<body>
		<input type="button" value="按钮" id="btn"/>
		<input type="text" id="input" value="熊大" name="username" />
		<script type="text/javascript">
		//单击按钮修改一个指定id属性标签中value的默认值
		 document.getElementById("btn").onclick = function(){
		 	//根据id属性获取指定元素
		 	var input = document.getElementById("input");
		 	console.log(input);
		 	input.value = "熊二";	
		 }
	
		</script>
	</body>
</html>

单击按钮修改按钮样式以及默认值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单击按钮修改按钮样式以及默认值</title>
	</head>
	<body>
		<input type="button" id="btn" value="按钮" />
		<script type="text/javascript">
			//根据id属性值获取指定元素
			var btn = document.getElementById("btn");
			//为btn注册事件  点击按钮  执行以下函数中的内容
			btn.onclick=function(){
				//btn中type类型修改为单选按钮radio
				btn.type="radio";
				//btn.checked = "checked";
				//btn添加中checked属性 视为默认选中 而checked的值只要不为空或者假即可 ,推荐使用true
				btn.checked = "false";
			}
		</script>
	</body>
</html>

单击按钮修改图片属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>单击按钮修改图片属性值</title>
	</head>
	<body>
		<input type="button" id="btn" value="按钮" />
		<img src="./2.jpg" alt="" id="im"/>
		<script type="text/javascript">
		//封装一个函数
		function myFun$(id){
			return document.getElementById(id);
		}
		myFun$("btn").onclick = function(){
			myFun$("im").width = 300;
			myFun$("im").height = 200;
		}
		</script>
	</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值