When JavaScript controls the font size settings on the company's official website, the news page will have a function for viewers to adjust their own text size. Therefore, in this idle time, sort out this function:
function setFontSize (id,content,params){ var oTarget = document.getElementById(id), content = document.getElementById(content), size = params.size || 14, maxSize = params.maxSize || 20, step = params.step || 2; oBtn = ''; oBtn1 = null, oBtn2 = null; oTarget.innerHTML = oBtn; oBtn1 = oTarget.childNodes[0]; oBtn2 = oTarget.childNodes[1]; oBtn1.onclick=function(){ if(size+step <= maxSize){ size+=step; }else{ size = maxSize; this.className+=' disabled'; this.disabled = true; } oBtn2.className.replace('disabled',''); oBtn2.disabled = false; content.style.fontSize = size +'px'; } oBtn2.onclick=function(){ if(size-step >= 12){ size-=step; }else{ size = 12; this.className+=' disabled' this.disabled = true; } oBtn1.className.replace('disabled',''); oBtn1.disabled = false; content.style.fontSize = size +'px'; } }
Call method:
SetFontSize (id, contentid, {size:, maxSize, step:});/** id: id of the parent box used to store the add or remove buttons. * Contentid: id of the content to be stored. * {} An object that provides the set parameters. |-Szie: the start (default) font size. |-MaxSize: Maximum font size. |-Step: the increment value. */
Tip: You can use font-size: 0 to hide the value of the Input element, and then customize the button style.