溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
- <meta name="keywords" content="關鍵詞1，關鍵詞2，關鍵詞3等等"/>
- <title>網頁字體大小</title>
- <style type="text/css">
- .msg{width:300px; height:auto; margin:0 auto; border:1px solid #000;}
- .msg_caption{height:40px; line-height:40px; text-align:center; background:#999;}
- </style>
- <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
- <script type="text/javascript">
- $(function(){
- $("button").click(function(){ //為button綁定單擊事件
- var thisEle=$("#para").css("font-size");//獲取id為para元素的字體,獲取到的是將返回數值和單位
- var textFontSize=parseInt(thisEle,10);//用parseInt方法去掉單位
- var unit=thisEle.slice(-2);//獲取單位，slice()方法返回字符串中從指定的字符開始的一個子字符串，這里使用的質量單位是px,兩個字符，所以從倒數第二個開始
- var cName=$(this).attr("class");
- if(cName=="bigger"){//判斷是bigger還是smaller，確定增量或減量
- if(textFontSize<=22){//判斷最大字體，避免無限放大
- textFontSize+=2;
- } ;
- }else if(cName=="smaller"){
- if(textFontSize>=12){//判斷最小字體，避免無限縮小
- textFontSize-=2;
- };
- };
- $("#para").css("font-size",textFontSize+unit);//再次獲取para元素并為它的font-size屬性賦予新的值，一定要拼接上單位
- })
- })
- </script>
- </head>
- <body>
- <div class="msg">
- <div class="msg_caption">
- <button class="bigger">放大</button>
- <button class="smaller">縮小</button>
- </div>
- <div id="para">
- jQuery應用與網頁字體大小的控制。
- jQuery應用與網頁字體大小的控制。
- jQuery應用與網頁字體大小的控制。
- jQuery應用與網頁字體大小的控制。
- jQuery應用與網頁字體大小的控制。
- jQuery應用與網頁字體大小的控制。
- jQuery應用與網頁字體大小的控制。
- </div>
- </div>
- </body>
- </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
