文字大小改变实例——if语句和className的使用

最新推荐文章于 2021-06-07 10:46:08 发布

波克比520

最新推荐文章于 2021-06-07 10:46:08 发布

阅读量599

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/u011175410/article/details/40586837

版权

javascript 专栏收录该内容

55 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字大小改变实例——if语句和className的使用</title>
<style>
.red { width:400px; border:10px solid #ccc; background:#eee; padding:10px; color:red; }
.green { width:400px; border:10px solid #ccc; background:#eee; padding:10px; color:green; }
</style>
<script>
window.onload = function(){
	var oBtn1 = document.getElementById('btn1');
	var oBtn2 = document.getElementById('btn2');
	var oBtn3 = document.getElementById('btn3');
	var oBtn4 = document.getElementById('btn4');
	var oP = document.getElementById('p1');	
	var num = 16;
	
	//字体变小
	oBtn1.onclick = function(){
		if(num>=12){
			num--;
			oP.style.fontSize = num + 'px';	
		}	
	};
	
	//字体变大
	oBtn2.onclick = function(){
		if(num<=24){
			num++;
			oP.style.fontSize = num + 'px';	
		}	
	};
	
	//文字变红
	oBtn3.onclick = function(){
		oP.className = 'red';	
	};
	
	//文字变绿
	oBtn4.onclick = function(){
		oP.className = 'green';	
	};
	
};
</script>
</head>

<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<input id="btn3" type="button" value="红" />
<input id="btn4" type="button" value="黄" />
<p id="p1" style="font-size:16px;">这是一个段落这是一个段落这是一个段落这是一个段落,这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落,这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落,这是一个段落这是一个段落这是一个段落这是一个段落。</p>
</body>
</html>

波克比520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文字大小改变实例——if语句和className的使用

文字大小改变实例——if语句和className的使用.red { width:400px; border:10px solid #ccc; background:#eee; padding:10px; color:red; }.green { width:400px; border:10px solid #ccc; background:#eee; padding:10px; color:
复制链接

扫一扫