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