纯前端实现—按钮操作字体放大缩小
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯前端实现—按钮操作字体放大缩小相关的知识，希望对你有一定的参考价值。
实现效果：
字体放大缩小
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体放大缩小</title>
</head>
<body>
<div class="box">
<button class="cut">-</button>
<button class="add">+</button>
<p>晋太元中，武陵人捕鱼为业。缘溪行，忘路之远近。忽逢桃花林，夹岸数百步，中无杂树，芳草鲜美，落英缤纷。渔人甚异之，复前行，欲穷其林。
林尽水源，便得一山，山有小口，仿佛若有光。便舍船，从口入。初极狭，才通人。复行数十步，豁然开朗。土地平旷，屋舍俨然，有良田美池桑竹之属。阡陌交通，鸡犬相闻。其中往来种作，男女衣着，悉如外人。黄发垂髫，并怡然自乐。
见渔人，乃大惊，问所从来。具答之。便要还家，设酒杀鸡作食。村中闻有此人，咸来问讯。自云先世避秦时乱，率妻子邑人来此绝境，不复出焉，遂与外人间隔。问今是何世，乃不知有汉，无论魏晋。此人一一为具言所闻，皆叹惋。余人各复延至其家，皆出酒食。停数日，辞去。此中人语云：“不足为外人道也。”</p>
</div>
<script>
var oCut = document.querySelectorAll(".box .cut")[0],
oAdd = document.querySelectorAll(".box .add")[0],
oP = document.querySelectorAll(".box p")[0],
// getComputedStyle(oP).fontSize获取字体的大小； parseInt()转换为整型
size = parseInt(getComputedStyle(oP).fontSize);
oCut.onclick = function () {
size--;
if(size<=8){
size = 8;
}
oP.style.fontSize = size + "px";
};
oAdd.onclick = function () {
size++;
if(size>=32){
size = 32;
}
oP.style.fontSize = size + "px";
}
</script>
</body>
</html>
以上是关于纯前端实现—按钮操作字体放大缩小的主要内容，如果未能解决你的问题，请参考以下文章
(工具技巧) —— Visual Studio Code页面放大缩小和字体的调整方式