» 日志 » javascript 字体放大放小
javascript 字体放大放小
月禅 发表于 2008-03-12 15:03:09
如果div中的文本没有被设定样式，那么就可以将它自由的放大缩小，但如果加了样式那么我的功能就失效了，如:<div style='font-size:13px'>aaaa </div>
为了解决这个问题，所以写了新的方法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.myclass
{
font-size:10px;
}
</style>
<script type="text/javascript">
var size=12;
function fnZoom(S)
{
var obj=document.getElementById("zoom");
var allEle=obj.innerHTML;
if(S=='+'){size = new Number(size)+2;}
else{
size=size-2;
}
//替换px
var reg=new RegExp("(\d+)px","gi");
var AryObj = new Array();
if (size>=16) {size=16}
if (size<=8) {size=8}
var newstr=allEle.replace(reg,size+"px");
//替换Class
var regClass=new RegExp("class=(\w*)","gi");
if (size>=20) {size=20}
if (size<=8) {size=8}
var finllayNewstr=newstr.replace(regClass,"style='font-size:"+size+"px'");
//无控制标签
finllayNewstr="<span style='font-size:"+size+"px'>"+finllayNewstr+"</span>";
obj.innerHTML=finllayNewstr ;
}
</script>
</head>
<body>
<a href="javascript:fnZoom('+')">变大</a>>>>>> <a href="javascript:fnZoom('-')">变小</a>
<div id="zoom">
<span class="myclass"> aaaaa </span>
<span style="font-size:12px"> bbbb </span>
<span> ccc</span>
<table> <tr><td class="myclass"> 你好</td></tr>
</table>
</div>
</body>
</html>
- » 2006年: 无题
