JavaScript 控制字體大小設(shè)置的方法
在做公司的官網(wǎng)的時(shí)候,新聞內(nèi)頁(yè)會(huì)有一個(gè)讓瀏覽者自己調(diào)整文字大小的功能,因此在這個(gè)空閑時(shí)間,把這個(gè)功能整理下來(lái):
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)值。 */
提示:可以通過(guò)font-size:0的方式來(lái)隱藏Input元素的value值,然后自定義按鈕的樣式。
以上這篇JavaScript 控制字體大小設(shè)置的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于Cesium實(shí)現(xiàn)拖拽3D模型的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Cesium實(shí)現(xiàn)在地圖上添加一個(gè)3D模型,并且可以實(shí)現(xiàn)拖拽效果。文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-06-06詳解怎么檢測(cè)和防止JavaScript死循環(huán)
最近工作中遇到了一些死循環(huán)導(dǎo)致的頁(yè)面卡死問(wèn)題,經(jīng)過(guò) trouble shooting 和代碼修復(fù)解決了問(wèn)題,所以下面這篇文章主要給大家介紹了怎么檢測(cè)和防止JavaScript死循環(huán)的相關(guān)資料,需要的朋友可以參考下2021-11-11JavaScript獲取字符串實(shí)際長(zhǎng)度(包含中英文)
這篇文章介紹了JavaScript獲取字符串實(shí)際長(zhǎng)度(包含中英文)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06一文快速弄懂webpack動(dòng)態(tài)import原理
無(wú)論你開(kāi)發(fā)使用的是CommonJS規(guī)范還是ES6模塊規(guī)范,打包后的文件都統(tǒng)一使用webpack自定義的模塊規(guī)范來(lái)管理、加載模塊,下面這篇文章主要給大家介紹了關(guān)于webpack動(dòng)態(tài)import原理的相關(guān)資料,需要的朋友可以參考下2022-04-04Javascript獲取background屬性中url的值
Javascript獲取CSS中屬性值方法有很多,今天工作的時(shí)候遇到了一個(gè)問(wèn)題是需要利用Javascript獲取css中background-img屬性u(píng)rl的值,通過(guò)查閱網(wǎng)站的資料找到了解決方法,現(xiàn)在將方法分享給大家,有需要的朋友們們可以參考借鑒,下面來(lái)一起看看吧。2016-10-10