属性读写操作注意事项

最新推荐文章于 2024-05-03 11:00:00 发布

qq_35476043

最新推荐文章于 2024-05-03 11:00:00 发布

阅读量275

点赞数 1

分类专栏： js基础

本文链接：https://blog.csdn.net/qq_35476043/article/details/51836829

版权

js基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>