新起点博客这是一段点击按钮增大文字的字号与减小字号的JS代码，非常实用，小说站必备。也可用于网站内容页内。
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS点击加大/减小字号的代码_其它代码_JS代码</title>
<meta name="keywords" content="加大,减小,字号,字体" />
<meta name="description" content="这是一段点击按钮增大文字的字号与减小字号的JS代码，非常实用，小说站必备" />
<style type="text/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 {width: 400px; margin: 30px auto;}
#wrap input:nth-child(1),#wrap input:nth-child(3){
width: 50px;
}
</style>
</head>
<body>
<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>
<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>
</body>
</html>
评论前必须登录！
注册