帮忙写一个js脚本
帮忙写一个js脚本，在网页中我添入了2个按钮，想点击“变大”按钮时，网页的字体会变大，点“变小”会变小，多次点变大时会一直变大（当然有上限），怎样解决？...
帮忙写一个js脚本，在网页中我添入了2个按钮，想点击“变大”按钮时，网页的字体会变大，点“变小”会变小，多次点变大时会一直变大（当然有上限），怎样解决？
展开
展开全部
<html>
<head>
<title>改变字号</title>
</head>
<script type="text/javascript">
window.onload=function(){
document.getElementById("big").onclick=function(){
document.body.style.fontSize=parseInt(document.body.style.fontSize)+1;
}
document.getElementById("small").onclick=function(){
document.body.style.fontSize=parseInt(document.body.style.fontSize)-1;
}
}
</script>
<body style="font-size:12px">
sdfadfsasdfdsaf
<br /><button id="big">变大</button>
<button id="small">变小</button>
</body>
</html>
<head>
<title>改变字号</title>
</head>
<script type="text/javascript">
window.onload=function(){
document.getElementById("big").onclick=function(){
document.body.style.fontSize=parseInt(document.body.style.fontSize)+1;
}
document.getElementById("small").onclick=function(){
document.body.style.fontSize=parseInt(document.body.style.fontSize)-1;
}
}
</script>
<body style="font-size:12px">
sdfadfsasdfdsaf
<br /><button id="big">变大</button>
<button id="small">变小</button>
</body>
</html>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
简单一个示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{font-size:12px;}
</style>
</head>
<body>
<script type="text/javascript">
var size=12;
function vbig(){
++size;
if(size>100) size=100;
document.styleSheets[0].rules[0].style.cssText="font-size:"+size+"px";
}
function vsmall(){
--size;
if(size<=12) size=12;
document.styleSheets[0].rules[0].style.cssText="font-size:"+size+"px";
}
</script>
</body>
<p>c测试字体大小萨达尽快了发将是卡拉飞机是了咖啡骄傲是拉开fjALJFK
AS DF SAF SA 11111111aaaaa</p>
<input type="button" value="变大" onclick="vbig()" /> <input type="button" value="变小" onclick="vsmall()" />
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{font-size:12px;}
</style>
</head>
<body>
<script type="text/javascript">
var size=12;
function vbig(){
++size;
if(size>100) size=100;
document.styleSheets[0].rules[0].style.cssText="font-size:"+size+"px";
}
function vsmall(){
--size;
if(size<=12) size=12;
document.styleSheets[0].rules[0].style.cssText="font-size:"+size+"px";
}
</script>
</body>
<p>c测试字体大小萨达尽快了发将是卡拉飞机是了咖啡骄傲是拉开fjALJFK
AS DF SAF SA 11111111aaaaa</p>
<input type="button" value="变大" onclick="vbig()" /> <input type="button" value="变小" onclick="vsmall()" />
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<script language = "javascript">
var cur = 100; //当前字体大小
var max = 3; //设置最多放大和缩小次数
var big = 0; //当前放大次数
var small = 0; //当前缩小次数
function bigger()
{
if(big < max)
{
big++; //放大次数加一
small--; //缩小次数减一
cur = cur*1.25;
document.body.style.setAttribute("zoom",cur+"%"); //字体放大1.25倍
}
else
alert("不能再放大了!");
}
function smaller()
{
if(small < max)
{
small++; //缩小次数加一
big--; //放大次数减一
cur = cur/1.25;
document.body.style.setAttribute("zoom",cur+"%"); //字体缩小1.25倍
}
else
alert("不能再缩小了!");
}
</script>
</head>
<body>
<input type="button" value="变大" onclick="bigger()">
<input type="button" value="变小" onclick="smaller()"></br>
<hr/>
<div style="font:20pt;color:RGB(255,0,0)">示例文字</div>
</body>
</html>
试试这个怎么样？
有什么不懂的可以问我。
<head>
<script language = "javascript">
var cur = 100; //当前字体大小
var max = 3; //设置最多放大和缩小次数
var big = 0; //当前放大次数
var small = 0; //当前缩小次数
function bigger()
{
if(big < max)
{
big++; //放大次数加一
small--; //缩小次数减一
cur = cur*1.25;
document.body.style.setAttribute("zoom",cur+"%"); //字体放大1.25倍
}
else
alert("不能再放大了!");
}
function smaller()
{
if(small < max)
{
small++; //缩小次数加一
big--; //放大次数减一
cur = cur/1.25;
document.body.style.setAttribute("zoom",cur+"%"); //字体缩小1.25倍
}
else
alert("不能再缩小了!");
}
</script>
</head>
<body>
<input type="button" value="变大" onclick="bigger()">
<input type="button" value="变小" onclick="smaller()"></br>
<hr/>
<div style="font:20pt;color:RGB(255,0,0)">示例文字</div>
</body>
</html>
试试这个怎么样？
有什么不懂的可以问我。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
