欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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 : 字體起始(默認)大小。
     |— maxSize : 最大字體。
     |— step : 增長的步長值。
*/

提示:可以通過font-size:0的方式來隱藏Input元素的value值,然后自定義按鈕的樣式。

以上這篇JavaScript 控制字體大小設(shè)置的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • js制作xml在線編輯器實例

    js制作xml在線編輯器實例

    本文主要講解了利用js制作xml在線編輯器的實例,文中講解實例的圖片和代碼非常詳細,感興趣的小伙伴現(xiàn)在一起來看一看吧
    2021-08-08
  • JS基于正則截取替換特定字符之間字符串操作示例

    JS基于正則截取替換特定字符之間字符串操作示例

    這篇文章主要介紹了JS基于正則截取替換特定字符之間字符串操作方法,結(jié)合具體實例形式分析了JS基于正則實現(xiàn)針對特殊字符、數(shù)字等字符串類型的截取操作相關(guān)技巧,需要的朋友可以參考下
    2017-02-02
  • 基于Cesium實現(xiàn)拖拽3D模型的示例代碼

    基于Cesium實現(xiàn)拖拽3D模型的示例代碼

    這篇文章主要為大家詳細介紹了如何利用Cesium實現(xiàn)在地圖上添加一個3D模型,并且可以實現(xiàn)拖拽效果。文中的示例代碼講解詳細,感興趣的可以了解一下
    2022-06-06
  • 微信小程序如何引用外部js,外部樣式,公共頁面模板

    微信小程序如何引用外部js,外部樣式,公共頁面模板

    這篇文章主要介紹了微信小程序引用外部js,外部樣式,公共頁面模板,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-07-07
  • 詳解怎么檢測和防止JavaScript死循環(huán)

    詳解怎么檢測和防止JavaScript死循環(huán)

    最近工作中遇到了一些死循環(huán)導(dǎo)致的頁面卡死問題,經(jīng)過 trouble shooting 和代碼修復(fù)解決了問題,所以下面這篇文章主要給大家介紹了怎么檢測和防止JavaScript死循環(huán)的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • ES6的循環(huán)與可迭代對象示例詳解

    ES6的循環(huán)與可迭代對象示例詳解

    這篇文章主要給大家介紹了關(guān)于ES6的循環(huán)與可迭代對象的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-01-01
  • js 動態(tài)選中下拉框

    js 動態(tài)選中下拉框

    js 動態(tài)選中下拉框
    2009-11-11
  • JavaScript獲取字符串實際長度(包含中英文)

    JavaScript獲取字符串實際長度(包含中英文)

    這篇文章介紹了JavaScript獲取字符串實際長度(包含中英文)的方法,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-06-06
  • 一文快速弄懂webpack動態(tài)import原理

    一文快速弄懂webpack動態(tài)import原理

    無論你開發(fā)使用的是CommonJS規(guī)范還是ES6模塊規(guī)范,打包后的文件都統(tǒng)一使用webpack自定義的模塊規(guī)范來管理、加載模塊,下面這篇文章主要給大家介紹了關(guān)于webpack動態(tài)import原理的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Javascript獲取background屬性中url的值

    Javascript獲取background屬性中url的值

    Javascript獲取CSS中屬性值方法有很多,今天工作的時候遇到了一個問題是需要利用Javascript獲取css中background-img屬性url的值,通過查閱網(wǎng)站的資料找到了解決方法,現(xiàn)在將方法分享給大家,有需要的朋友們們可以參考借鑒,下面來一起看看吧。
    2016-10-10

最新評論