javascript控制字體大小
網頁上的字體對有些人而言太大，有些人又覺得太小
因此在某些特定網頁上都有讓使用者自行修改字體大小的按鈕
下面簡單分享利用Javascript修改字體大小
這個例子用的是JQuery來操作，因此需要先引入JQuery的程式
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
//首先宣告初始的字體大小比例是100%
var size = 100;
//寫一個變大函數
function SizeToLarge(){
//判斷目前size大小，如果已經到最大就提示已經最大(此例最大為500%)
if(size>499){
alert("This is the largest !!");
}else{
//如果不是最大則每次增加50%
size = size+50;
//使用javascript中的CSS函數控制body內的字體大小
//P.S. body也可以換成 id name 或 class name
//例如：$("#idfont") 或是 $(".idfont")
$("body").css("font-size",size+"%");
}
}
//寫一個變小函數
function SizeTosmall(){
//判斷目前size大小
if(size>99){
//如果不是最大則每次減少50%
size = size-50;
//使用javascript中的CSS函數控制字體大小
//P.S. body也可以換成 id name 或 class name
//例如：$("#idfont") 或是 $(".idfont")
$("body").css("font-size",size+"%");
}else{
//如果已經到最小就提示已經最小(此例最小為50%)
alert("This is the smallest !!");
}
}
</script>
<body>
<!--增加一個字體變大的按鈕，按下按鈕後則onClick則呼叫字體變大函數用javascript讓字體變大-->
<input type="button" value="字體變大" onClick="SizeToLarge()">
<!--增加一個字體變小的按鈕，按下按鈕後則onClick則呼叫字體變小函數用javascript讓字體變小-->
<input type="button" value="字體變小" onClick="SizeTosmall()">
我在BODY裡面
</body>
這樣一來，只要按字體變大就能操縱javascript讓字體變大
反之，只要按字體變小就能操縱javascript讓字體變小
注意：
A. 在利用Javascript修改字體大小的時候，必須定義清楚修改字體的區塊，否則可能會影響其他版面或其他人的程式
B. 盡量避免直接指定字體大小的寫法("font-size", "20px")，這樣的寫法可能影響到其他人的字體大小被修改，而且日後修改還得多改一個地方
上述就是簡單的字體大小改變的方式
提供大家參考
如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦～
留言列表
