一. 字体变大缩小
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
#box{margin:20px 200px}
#box #title span {
border:1px solid red;
padding:0px 20px;
text-align:center;
margin-right:50px;
}
#content{
margin-top:80px;
font-size:18px;
}
</style>
</head>
<body>
<div id="box">
<div id="title">
<span>-</span><span>+</span>
</div>
<div id="content">字体变大缩小啦啦啦啦啦啦</div>
</div>
<script>
//获取字体
var font = document.getElementById("content");
var index=16;
//var click = document.querySelectorAll(span);
var click = document.getElementsByTagName("span");//获取点击的元素
console.log(click [1]);
click[1].onclick = function(){
//alert(1);
index ++;
font.style.fontSize = index+"px";
console.log(index);
}
click[0].onclick = function(){
//alert(1);
index --;
font.style.fontSize = index+"px";
console.log(index);
if (index<=12)
{click[0].onclick = null;
alert("不能再缩小了");
}
}
</script>
</body>
</html><!doctype html>
<html lang="en">
