快捷導(dǎo)航

JavaScript 控制字體大小設(shè)置的方法

更新時(shí)間：2016年11月23日 10:37:50 投稿：jingxian

下面小編就為大家?guī)硪黄狫avaScript 控制字體大小設(shè)置的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在做公司的官網(wǎng)的時(shí)候，新聞內(nèi)頁會(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 : 增長的步長值。
*/

提示：可以通過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ì)頁面元素屬性動(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
在JavaScript中使用JSON數(shù)據(jù)
JSON 是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON 數(shù)據(jù)不需要任何特殊的 API 或工具包,接下來由腳本之家小編給大家介紹在JavaScript中使用JSON數(shù)據(jù)的方法，感興趣的朋友一起學(xué)習(xí)吧
2016-02-02
JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁碼代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)前端動(dòng)態(tài)分頁碼代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
JavaScript 拖拽實(shí)例代碼
這篇文章主要介紹了JavaScript 拖拽實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-09-09
小程序點(diǎn)贊收藏功能的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了小程序點(diǎn)贊收藏功能的實(shí)現(xiàn)代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
js 觸發(fā)select onchange事件代碼
select 或text的onchange事件需要手動(dòng)（通過鍵盤輸入）改變select或text的值才能觸發(fā)，本文為大家介紹下使用js觸發(fā)select onchange事件
2014-03-03