属性读写操作注意事项

最新推荐文章于 2025-08-13 18:46:49 发布

原创最新推荐文章于 2025-08-13 18:46:49 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

js基础专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的HTML页面示例，该页面利用JavaScript实现按钮点击事件来动态改变段落文字的字体大小，并通过切换不同的样式类来改变背景颜色和文字颜色。通过这个例子，读者可以了解到如何在网页上应用基本的交互效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script>
			window.onload =function()
			{
				var oBtn1 = document.getElementById('btn1');
				var oBtn2 = document.getElementById('btn2');
				var oRed = document.getElementById('red1');
				var oYellow = document.getElementById('yellow1');
				var Op = document.getElementById('p1');
				var num = 15;
				oBtn1.onclick = function()
				{ 
					num++;
					//JS中不允许出现“-”,后面单词第一个字母大写。  eg:font-size:fontSize   padding-top:paddingTop 
					Op.style.fontSize = num+'px';
				};
				oBtn2.onclick = function()
				{
					num--;
					Op.style.fontSize = num+'px';
				};
				oRed.onclick = function(){
				/*	太过于复杂，建议把一下代码写到样式表里去。
					Op.style.width = '300px';
					Op.style.background = 'yellow';
					Op.style.border = '10px solid #ccc'
					Op.style.padding = '20px';
					Op.style.color = 'red';
					class 保留字  关键字：var function
					 class =>className*/
					Op.className = 'red';
				};
				oYellow.onclick = function()
				{
					Op.className = 'yellow';
				};
			};
		</script>
		<style>
			.red{width:300px;background: pink;border: 10px solid #ccc;padding:20px;color:yellow;}
			.yellow{width:300px;background: yellow;border: 10px solid #ccc;padding:20px;color:black;}
		</style>
	</head>
	<body>
		<input id="btn1" type="button" value="+"/>
		<input id="btn2" type="button" value="-"/>
		<input id="red1"  type="button" value="红"/>
		<input id="yellow1" type="button" value="黄"/>
		<p id="p1" >大家好~</p>      <!--此处不需要加类名  即，class = "red";-->
	</body>
</html>