前端笔记48——实现小说网页中字体大小如意变

最新推荐文章于 2024-04-07 15:36:31 发布

野生杂学家阿博

最新推荐文章于 2024-04-07 15:36:31 发布

阅读量319

点赞数 2

分类专栏：前端文章标签：前端 JavaScript 网页中的字体变大变小

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/85543940

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

相信很多小伙伴都有阅读的习惯，那么你们是否有留意到字体变大或变小功能呢？下面分享一下这个功能的实现。

让网页中的字体增大变小

功能说明：点击+号，id为p1的p元素中的字体变大2个像素点击-号，id为p1的p元素中的字体变小3个像素。

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				text-align: center;
			}
			#p1{
				width: 50%;
				height: 100px;
				margin: 50px auto;
				border: 1px solid #CCCCCC;
			}
		</style>
	</head>
	<body>
		<button id="btn1">+</button>
		<button id="btn2">-</button>
		<p id="p1">大小如意，变变变！！！</p>
		<script type="text/javascript">
			// 找到对象
			var oBtn1 = document.getElementById("btn1")
			var oBtn2 = document.getElementById("btn2")
			var oP1 = document.getElementById("p1")
			// 这个变量用来存 p元素的字体大小
			var fontSize = 20
			// 点击字体变大
			oBtn1.onclick = function(){
				// 每次点击变大两个像素
				fontSize = fontSize + 2
				oP1.style.fontSize = fontSize + "px"
			}
			// 点击字体变小
			oBtn2.onclick = function(){
				// 每次点击变小3个像素
				fontSize = fontSize - 3
				oP1.style.fontSize = fontSize + "px"
			}
		</script>
	</body>
</html>

通过上面的代码，我们就可以实现字体变大或变小功能。希望对前端开发的小伙伴有帮助。

野生杂学家阿博

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端笔记48——实现小说网页中字体大小如意变

前言相信很多小伙伴都有阅读的习惯，那么你们是否有留意到字体变大或变小功能呢？下面分享一下这个功能的实现。让网页中的字体增大变小功能说明：点击+号，id为p1的p元素中的字体变大2个像素点击-号，id为p1的p元素中的字体变小3个像素。实现代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF...
复制链接

扫一扫