如何用JS实现单击按钮字体逐渐变大
时间：2011-09-28
来源：互联网
我想通过test.style.fontSize+=2实现字体每次增大2px，但是不行，估计是有单位的问题，要怎么解决该问题呢，请好心人帮助哦
复制内容到剪贴板
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置元素属性</title>
<style>
#test{border:2px solid red; padding:15px; background:#fee; width:80px; position:absolute;}
</style>
</head>
<body>
<p id="test" style="font-size:14px; color:#000;padding-top:5px;">内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<input type="button" value="变大" onclick="size()"/> <br />
<input type="button" value="变大" onclick="big()"/> <br />
<input type="button" value="移动" onclick="move()"/>
<script>
var test=document.getElementById("test");
function size(){
test.style.fontSize+=2
alert (test.style.color); //访问CSS属性color，IE中输出#f00
}
</script>
</body>
</html>
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置元素属性</title>
<style>
#test{border:2px solid red; padding:15px; background:#fee; width:80px; position:absolute;}
</style>
</head>
<body>
<p id="test" style="font-size:14px; color:#000;padding-top:5px;">内容</p>
<br />
<br />
<br />
<br />
<br />
<br />
<input type="button" value="变大" onclick="size()"/> <br />
<input type="button" value="变大" onclick="big()"/> <br />
<input type="button" value="移动" onclick="move()"/>
<script>
var test=document.getElementById("test");
function size(){
test.style.fontSize+=2
alert (test.style.color); //访问CSS属性color，IE中输出#f00
}
</script>
</body>
</html>
作者: tangsix 发布时间: 2011-09-28
简单改一下，看看可以不
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>设置元素属性</title> <style> #test{border:2px solid red; padding:15px; background:#fee; width:80px; position:absolute;} </style> </head> <body> <p id="test" style="font-size:14px; color:#000;padding-top:5px;">内容</p> <br /> <br /> <br /> <br /> <br /> <br /> <input type="button" value="变大"/> <br /> <input type="button" value="变大"/> <br /> <input type="button" value="移动"/> <script> window.onload=function (){ var aInput=document.getElementsByTagName('input'); var oTest=document.getElementById("test"); aInput[0].onclick=function() { oFontSize=parseInt(oTest.style.fontSize); oFontSize++; oTest.style.fontSize=oFontSize+'px'; }; } </script> </body> </html>
提示：您可以先修改部分代码再运行
提示：您可以先修改部分代码再运行
作者: guo822714 发布时间: 2011-09-28
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
