通過JavaScript控制字體大小的代碼
更新時(shí)間：2011年10月04日 20:02:59 作者：
這個(gè)腳本會(huì)改變一個(gè)段落內(nèi)的任何文字的字體大?。?lt;P>標(biāo)簽）。如果你想改變其他標(biāo)簽內(nèi)的文本編輯的getElementsByTagName（"P"）;的一部分。
為了此代碼到您的網(wǎng)頁必須使用像素大小的字體（PX），而不是相對(duì)大小的字體，使用“EM”或“％”。當(dāng)然如果你使用其他字體單位的代碼可以很容易地適應(yīng)這些。如果腳本不能找到一個(gè)段落的字體大小，它會(huì)默認(rèn)為12px。
核心代碼:
var min=8;
var max=18;
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}
}
包括上面的代碼在您的網(wǎng)頁（無論是放置在頭部分，或?qū)⑵浞胖迷谝粋€(gè)外部JS文件和進(jìn)口）。然后可以調(diào)用的增加和減少象下面的字體大小的功能。
使用方法：
<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>
核心代碼:
復(fù)制代碼 代碼如下:
var min=8;
var max=18;
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p[i].style.fontSize = s+"px"
}
}
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p[i].style.fontSize = s+"px"
}
}
包括上面的代碼在您的網(wǎng)頁（無論是放置在頭部分，或?qū)⑵浞胖迷谝粋€(gè)外部JS文件和進(jìn)口）。然后可以調(diào)用的增加和減少象下面的字體大小的功能。
使用方法：
復(fù)制代碼 代碼如下:
<a href="javascript:decreaseFontSize();">-</a>
<a href="javascript:increaseFontSize();">+</a>
相關(guān)文章
今天小編就為大家分享一篇關(guān)于layui時(shí)間回顯問題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
如何給Web頁面增加夜間模式功能? 其實(shí)所謂的夜間模式就是在頁面上增加一個(gè)透明的遮罩層，但是遮罩層會(huì)擋住頁面元素， 解決方法是 添加DIV，給DIV的outline屬性一個(gè)很大的outline-width值，用outline的邊框作為遮罩，這樣既能正常點(diǎn)擊頁面元素，又能達(dá)到夜間模式的效果2014-01-01
JavaScript實(shí)現(xiàn)快速排序的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)快速排序的方法,結(jié)合實(shí)例形式分析了快速排序的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-01-01
仿谷歌主頁js動(dòng)畫效果實(shí)現(xiàn)代碼
昨天看到谷歌的主頁上出現(xiàn)了幾個(gè)動(dòng)畫，發(fā)現(xiàn)不是flash做的，而是用js+圖片實(shí)現(xiàn)的！今天把拷貝到的圖片，用js實(shí)現(xiàn)了動(dòng)畫效果！2013-07-07
Javascript刷新頁面實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
JavaScript中錯(cuò)誤正確處理方式小結(jié)你用對(duì)了嗎
本文將會(huì)討論客戶端JavaScript中的錯(cuò)誤處理。主要介紹JavaScript中的易犯錯(cuò)誤、錯(cuò)誤處理、異步代碼編寫等內(nèi)容。下面就讓我們一起看看如何正確處理JavaScript中的錯(cuò)誤2017-10-10
所謂的遞歸函數(shù)就是在函數(shù)體內(nèi)調(diào)用本函數(shù)。使用遞歸函數(shù)一定要注意，處理不當(dāng)就會(huì)進(jìn)入死循環(huán)。遞歸函數(shù)只有在特定的情況下使用 ，比如階乘問題2012-10-10
純屬技術(shù)交流，在實(shí)際應(yīng)用中不建議那么做。建議js加載比較好。2009-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序云開發(fā)之使用云存儲(chǔ)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫效果實(shí)例代碼
在本篇文章里小編給大家整理了關(guān)于JavaScript實(shí)現(xiàn)的3D旋轉(zhuǎn)魔方動(dòng)畫效果實(shí)例代碼，有興趣的朋友們測試下。2019-07-07