通过javascript改变字体大小,内容页适用

作者:admin 分类:eyoucms使用教程 时间:2023-05-15 浏览:

(图1)

第一种:

前端代码:

<span style="margin-left:30px;">字体:
    <a onclick="add()" style="font-size:18px;font-weight:bold;" href="javascript:SetFont()">A+</a> 
    <a onclick="min()" style="font-size:16px;font-weight:bold;" href="javascript:SetFont()">A-</a> 
</span>
<div id="nr">{$eyou.field.content}</div>

前端JS代码:

<script>
var isClick=false;
var size=16;
var maxsize=22;
var minsize=14;
function add(){
isClick = true;
if(size>=maxsize){alert("不能再大了!!!")}
else{
size+=1;
}
}
function min(){
isClick = true;
if(size<=minsize){alert("不能再小了!!!")}
else{size-=1;}
}

function SetFont() { 
var FontArea = document.getElementById("nr");//给内容范围设置一个id nr
if (isClick==true){
console.log("当前字体大小"+size+"px");
}
else{
size=size;
}
if(!FontArea)
{ 
return; 
}
FontArea.style = 'font-size:'+size+ 'px'; 
var tagname=["td","span","div","a","li","ul","ol","p","font","b","tr","strong","table","section","pre","article","h1","h2","h3","h4","h5","h6"];
var length=tagname.length;
//遍历数组中的元素,逐一赋予字号
for(var k=0;k<length;k++){
	tag=FontArea.getElementsByTagName(tagname[k]);
	for(var i=0;i<tag.length;i++){
		tag[i].style.fontSize=size+'px';
	}
	}
}
</script>

第二种(前提不要给P标签加字体大小):

前端代码:

<input id="Btn1" type="button" value="+" name=""/>
<input id="Btn2" type="button" value="-" name=""/>
<div id="nr" style="font-size:14px;">{$eyou.field.content}</div>

前端JS代码:

<script>
    window.onload= function(){
        var oPtxt=document.getElementById("nr");
        var oBtn1=document.getElementById("Btn1");
        var oBtn2=document.getElementById("Btn2");
        var num = 14; /*定义一个初始变量*/
        oBtn1.onclick = function(){
            num++;
            oPtxt.style.fontSize=num+'px';
        };
        oBtn2.onclick = function(){
            num--;
            oPtxt.style.fontSize=num+'px';
        }
    }
</script>



文章链接:https://eyhtml.com/xinwendongtai/420.html
文章标题:通过javascript改变字体大小,内容页适用
文章版权:所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!
本文最后更新发布于2023-05-15

相关阅读

温馨提示
新春特惠活动持续至马年元宵节
月费会员只要19元,终身会员原价299,现价只要99元。终身会员商业模板5折出售,最近大量模板陆续上新中!
我要查看