切换字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#main {
width: 1000px;
margin: 50px auto 0px;
font-size: 14px;
font-family: "微软雅黑";
background-color: #f1f1f1;
}
span.but {
display: inline-block;
width: 50px;
background-color: #000;
height: 30px;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 20px;
margin-right: 1px;
cursor: pointer;
user-select: none;
/* 点击加号或减号，默认会被选中，阻止文字被选中 */
}
</style>
</head>
<body>
<div id="main">
<span id="max" class="but"> + </span>
<span id="min" class="but"> - </span>
<p>2016年5月12日上午9点，央视二套（CCTV-2）“财经资讯”栏目组到访潭州。此次“来自改革创新一线的报道”的主题采访在全国各地收集创新创业一线企业和团队典型，而潭州教育是湖南地区的第一家企业也是重要一站。</p>
<p>
潭州教育成立于2007年，于2015年10月正式入驻长沙国家高新技术产业开发区麓谷芯城信息产业园区，是一家典型性的创新创业的“互联网+教育”企业。在市委市政府及长沙高新区的大力支持下，潭州教育得到了飞速的发展，已经成为一家具有一定影响力的跨品类的综合性直播在线教育企业。
</p>
<img src="images/pic1.jpg" />
<p>栏目组拍摄潭州讲师上课情况</p>
</div>
<script>
//获取元素
let oMain = document.getElementById('main');
let oMax = document.getElementById('max');
let oMin = document.getElementById('min');
//信号量
let num = 14; //字体大小
//绑定事件
oMax.onclick = function () {
num++
// if(num>20){ //此处也可以使用短路算法
// num=20
// }
num > 20 && (num = 20);//短路算法
oMain.style.fontSize = num + 'px';
console.log(111);
}
oMin.onclick = function () {
num--;
if (num < 12) {
num = 12;
}
oMain.style.fontSize = num + 'px'
console.log(222)
}
</script>
</body>
</html>
网友评论