JavaScript HTML基本操作

最新推荐文章于 2022-06-26 19:15:29 发布

原创最新推荐文章于 2022-06-26 19:15:29 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

106 篇文章

订阅专栏

本文通过一个具体的HTML页面示例，展示了如何使用JavaScript操作页面元素，包括获取输入框的值并显示在页面上，以及对按钮点击事件的响应。文章深入浅出地介绍了HTML结构、CSS样式和JavaScript脚本的基本应用。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style>
			#div1 {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
			}
			
			#div2 {
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;
			}
		</style>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<script>
			window.onload=function()
			{
				var oBtn=document.getElementById('btn1');
				var oText=document.getElementById('text1');
				var oSelect=document.getElementById('select1');
				var oImg=document.getElementById('img1');
				var oP=document.getElementById('p1');	
			
				oBtn.onclick=function(){
					/*oImg.src=oText.value;*/
					alert(oP.innerHTML);
					oP.innerHTML=oText.value;
				}
			}
		</script>
	</head>
	<body>
		<input id="text1" type="text"/>
		<select id="select1">
			<option id="select1">
				<option value="北京">北京</option>
				<option value="上海">上海</option>
				<option value="杭州">杭州</option>
			</option>
		</select>
		<input id="btn1" type="button" value="按钮"/>
		<br />
		<img id="img1" src="img/1.jpg" width="500px" height="200px;"/>
		<br />
		<p id="p1">123213213</p>
	</body>

</html>