用js放大小说字体

开发工具与关键技术：DW /js;
作者：多事之秋
撰写时间：2019年2月18日

因为某些原因，撰写时间和发表时间不一致，请原谅；

用简单代码做一个做用js放大小说字体

效果如下：

首先创建一个 html

<div id="wrap">
		<div class="text" id="text">
			<p id="p_one">鼠标点击文字放大可以用作小说,文字的放大效果</p>
		</div>
		<form >
           <input type=button value="A-" onClick="A_one()">
           <input type="text" name="box" id="box" value="16" size=4>
           <input type=button value="A+" onClick=" A_two()" >
        </form>
	</div>

然后添加元素属性，CSS代码为：

@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
}
.text{
	width: 200px;
	height: 100px;
	color: #fff;
	font-size: 16px;
	padding: 16px;
	background: #19ABB7;
}
#p_one{
	display: block;
	position: relative;
}
#p_two{
	display: block;
}
input{
	text-align: center;
}
#wrap input:nth-child(1),#wrap input:nth-child(3){
	width: 50px;
}

Js代码为：

<script>
		var Size=16;
		var BoxSize=document.getElementById("box");
		var Box=document.getElementById("box").value;
		var text=document.getElementById("text");
		function A_one(){
			if(Size===15){
				return;
			}
			else{
				Size--;
				BoxSize.value=Size;
				text.style.fontSize=Size+"px";
			}
		};
		function A_two(){
			if(Size===22){
				return;
			}
			else{
				Size++;
				BoxSize.value=Size;
				text.style.fontSize=Size+"px";
			}
		};
	</script>