JavaScript作业----(1)字体变大缩小

最新推荐文章于 2022-02-25 16:51:30 发布

yoke743

最新推荐文章于 2022-02-25 16:51:30 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/yoke743/article/details/80504762

版权

一. 字体变大缩小

<!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>