通过javascript改变字体大小,内容页适用!
2022-06-05 加入收藏
第一种:
前端代码:
<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>