JavaScript 控制字體大小設(shè)置的方法
更新時間：2016年11月23日 10:37:50 投稿：jingxian
下面小編就為大家?guī)硪黄狫avaScript 控制字體大小設(shè)置的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在做公司的官網(wǎng)的時候，新聞內(nèi)頁會有一個讓瀏覽者自己調(diào)整文字大小的功能，因此在這個空閑時間，把這個功能整理下來：
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 = '<input type="button" value="+"/><input type="button" value="-" />';
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';
}
}
調(diào)用方式：
setFontSize(id,contentid,{size:,maxSize,step:});
/*
* id ：用于存放增加或減小兩個按鈕的父級盒子的id。
* contentid: 存放內(nèi)容的id。
* {} 一個對象，用于提供設(shè)置的參數(shù)。
|— szie : 字體起始(默認(rèn))大小。
|— maxSize : 最大字體。
|— step : 增長的步長值。
*/
提示：可以通過font-size:0的方式來隱藏Input元素的value值，然后自定義按鈕的樣式。
以上這篇JavaScript 控制字體大小設(shè)置的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了原生JS實現(xiàn)獲取及修改CSS樣式的方法,結(jié)合實例形式簡單分析了JavaScript針對頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-09-09
extjs中form與grid交互數(shù)據(jù)(record)的方法
這篇文章介紹了extjs中form與grid交互數(shù)據(jù)(record)的方法，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簡單文字跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了微信小程序 自定義消息提示框的相關(guān)資料,wx.showToast(OBJECT)接口調(diào)用，實現(xiàn)改功能，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了淺談Emergence.js 檢測元素可見性的 js 插件，詳細(xì)的介紹了Emergence.js安裝和使用方法，具有一定的參加性，有興趣的可以了解一下2017-11-11
JSON 是 JavaScript 原生格式，這意味著 在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包,接下來由腳本之家小編給大家介紹在JavaScript中使用JSON數(shù)據(jù)的方法，感興趣的朋友一起學(xué)習(xí)吧2016-02-02
這篇文章主要介紹了JS實現(xiàn)前端動態(tài)分頁碼代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JavaScript 拖拽實例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了小程序點贊收藏功能的實現(xiàn)代碼示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
select 或text的onchange事件需要手動（通過鍵盤輸入）改變select或text的值才能觸發(fā)，本文為大家介紹下使用js觸發(fā)select onchange事件2014-03-03