<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<title>Document</title>
</head>
<body>
<div>
琴笛伴奏曲悠扬,
巧弄簧舌众引吭。
老汉阿婆争话筒,
装腔作势染夕阳。
</div>
<button>字体放大</button>
<button>字体缩小</button>
<script>
//获取div元素
var odiv = document.getElementsByTagName("div")[0];
//获取按钮+
var but1 = document.getElementsByTagName("button")[0];
// 获取按钮-
var but2 = document.getElementsByTagName("button")[1];
console.log(odiv, but1, but2);
var n = 16;
// 点击
but1.onclick = function () {
n += 2;
if (n > 30) {
n = 30;
}
odiv.style.fontSize = n + "px";
}
but2.onclick = function () {
n--;
if (n <=12) {
n = 12;
}
odiv.style.fontSize = n + "px";
}
</script>
</body>
</html>