放大缩小

最新推荐文章于 2023-12-14 23:47:26 发布

会长大的菜鸟

最新推荐文章于 2023-12-14 23:47:26 发布

阅读量168

点赞数

分类专栏： html js 前端

本文链接：https://blog.csdn.net/qq_42370505/article/details/108930618

版权

js 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 500px;
				height: 500px;
				border: 2px solid black;
				font-size: 100px;
				margin: auto;
				text-align: center;
				line-height: 500px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			李
		</div>
		<button id="btnup">
			放大
		</button>
		<button id="btndowm">
			缩小
		</button>
		<script>
			var box = document.getElementById("box")
				btnup= document.getElementById("btnup")
				btndown=document.getElementById("btndowm")
			btnup.onclick = function()
			{
				// 获取当前样式的值 getComputedStyle(名字).属性 得到的当前的字的大小为50px,由于是字符串，转化为数字
				var size = parseInt(getComputedStyle(box).fontSize);
				size =size+10;
				if(size>=200)
				{
					size=200;
				}
				//设置样式大小
				box.style.fontSize=size+"px";
			}
			//缩小同理
		</script>
		
	</body>
</html>