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