版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chengxu_kuangrexintu/article/details/85543940
前言
相信很多小伙伴都有阅读的习惯,那么你们是否有留意到字体变大或变小功能呢?下面分享一下这个功能的实现。
让网页中的字体增大变小
功能说明:点击+
号,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>
通过上面的代码,我们就可以实现字体变大或变小功能。希望对前端开发的小伙伴有帮助。