首先,設(shè)置兩個(gè)按鈕,點(diǎn)擊按鈕可增加或減小字號(hào)!
<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>
然后就是寫js代碼,
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");//給內(nèi)容范圍設(shè)置一個(gè)id nr
if (isClick==true){
console.log("當(dāng)前字體大小"+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;
//遍歷數(shù)組中的元素,逐一賦予字號(hào)
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';
}
}
}