onclick 点击事件
onclick 以文字de放大与缩小为实例
嗨… 各位小可爱们，我们又见面了
先来了解一下定义和用法
onclick 属性在单击鼠标时触发。 记住是 单击单击单击！！！ 只点击一次即可触发事件
废话不多，直接上代码，希望能对你们有所帮助
<meta charset="utf-8" />
<style type="text/css">
#wrap{
width: 90%;
height: 100%;
margin: 50px auto;
padding: 20px;
font-family: arial;
font-size: 18px;
color: white;
border-radius: 10%;
background-image: radial-gradient(ellipse 100% 100% at center,pink 35%,
lightpink 45%, deeppink 100%);/*设置背景颜色*/
}
#wrap p{
text-indent: 2em;
}
#wrap span{
display: inline-block;
width: 50px;
height: 25px;
background-color: deeppink;
text-align: center;
line-height: 25px;
margin-left: 80px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<span> + </span>
<span> - </span>
<p>我感到难过，不是因为你欺骗了我，而是因为我再也不能相信你了。 ——尼采 </p>
<p>我始终相信，在这个世界上，一定有另一个自己，在做着我不敢做的事，在过着我想过的生活。 ——宫崎骏 </p>
<p>你锋芒毕露，这是你的弱点，你像把无鞘刀，锋利，但好刀应在刀鞘里。 ——黑泽明《剑穿心》 </p>
<p>如果你给我的，和你给别人的是一样的，那我就不要了。 ——三毛 </p>
<p>花朵预兆着果实，少女梦想着爱情。 ——雨果《海上劳工》 </p>
<p>为什么你看到别人眼中有刺，却看不到自己眼中有梁木。 ——《圣经》 </p>
<p>没有不可治愈的伤痛，没有不能结束的沉沦，所有失去的，会以另一种方式归来。——约翰•肖尔斯《许愿树》 </p>
<p>别人帮你，那是情分，不帮你，那是本分。容不容得下是你的气度，能不能让你容下是我的本事。——《甄嬛传》 </p>
<p>一切都明明白白，但我们仍匆匆错过，因为你相信命运，因为我怀疑生活。——顾城《错过》 </p>
<p>我需要，最狂的风，和最静的海。 ——顾城 </p>
<p>没有人愿意被关在笼子里，问题是给你一片无边无际的天空，你是不是真的敢要。 ——江南《此间的少年》 </p>
<p>Is life always this hard,or is it just when you are a kid? </p>
<p>人生总是那么痛苦吗？还是只有小时候是这样？ </p>
<p>Always like this. </p>
<p>总是如此。 ——《这个杀手不太冷》 </p>
<p>我一直以为，我没有对不住任何人，但现在我知道，我最对不住的，就是我自己。 ——陈凯歌《无极》 </p>
<p>如谷之歌，扎根土里。与风共存，与种子越冬，与鸟歌颂。 ——宫崎骏《天空之城》 </p>
<p>也许，每天看见许多的水，对人类具有重大意义。 ——村上春树《当我谈跑步时我谈些什么》 </p>
<p>不要停在平原，不要登上高山，从半山上看，世界显得最美。 ——尼采《世界的智慧》 </p>
<p>有时候，你想证明给一万个人看，到后来，你发现只得到了一个明白的人，那就够了。 ——韩寒《后会无期》 </p>
<script type="text/javascript">
let oWrap = document.getElementById("wrap");
let oSpan = document.getElementsByTagName("span");
let font=18;
oSpan[0].onclick = function(){//点击事件
font++;
if(font>=21){
font = 21;
}
oWrap.style.fontSize = font + "px";
}
oSpan[1].onclick = function(){
font--;
if(font>=10){
font = 10;
}
oWrap.style.fontSize = font + "px";
}
</script>
</body>
文字从网上摘的，嘿嘿，直接看效果
