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"),這樣的寫法可能影響到其他人的字體大小被修改,而且日後修改還得多改一個地方

 

上述就是簡單的字體大小改變的方式

提供大家參考

 

 

如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦~

 

 

文章標籤
創作者介紹

史丹利愛碎念

newaurora 發表在 痞客邦 PIXNET 留言(0) 人氣()