jQuery應(yīng)用與網(wǎng)頁(yè)字體大小控制

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="content-type" content="text/html;charset=utf-8"/> 
  5.         <meta name="keywords" content="關(guān)鍵詞1，關(guān)鍵詞2，關(guān)鍵詞3等等"/> 
  6.         <title>網(wǎng)頁(yè)字體大小</title> 
  7.         <style type="text/css"> 
  8.             .msg{width:300px; height:auto; margin:0 auto; border:1px solid #000;} 
  9.             .msg_caption{height:40px; line-height:40px; text-align:center; background:#999;} 
  10.         </style> 
  11.         <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
  12.         <script type="text/javascript"> 
  13.             $(function(){ 
  14.                 $("button").click(function(){ //為button綁定單擊事件 
  15.                     var thisEle=$("#para").css("font-size");//獲取id為para元素的字體,獲取到的是將返回?cái)?shù)值和單位 
  16.                     var textFontSize=parseInt(thisEle,10);//用parseInt方法去掉單位 
  17.                     var unit=thisEle.slice(-2);//獲取單位，slice()方法返回字符串中從指定的字符開(kāi)始的一個(gè)子字符串，這里使用的質(zhì)量單位是px,兩個(gè)字符，所以從倒數(shù)第二個(gè)開(kāi)始 
  18.                     var cName=$(this).attr("class"); 
  19.                     if(cName=="bigger"){//判斷是bigger還是smaller，確定增量或減量 
  20.                         if(textFontSize<=22){//判斷最大字體，避免無(wú)限放大 
  21.                             textFontSize+=2; 
  22.                         } ; 
  23.                     }else if(cName=="smaller"){ 
  24.                         if(textFontSize>=12){//判斷最小字體，避免無(wú)限縮小 
  25.                             textFontSize-=2; 
  26.                         };  
  27.                     }; 
  28.                     $("#para").css("font-size",textFontSize+unit);//再次獲取para元素并為它的font-size屬性賦予新的值，一定要拼接上單位 
  29.                 }) 
  30.             }) 
  31.         </script> 
  32.     </head> 
  33.     <body> 
  34.         <div class="msg"> 
  35.             <div class="msg_caption"> 
  36.                 <button class="bigger">放大</button> 
  37.                 <button class="smaller">縮小</button> 
  38.             </div> 
  39.             <div id="para"> 
  40.                 jQuery應(yīng)用與網(wǎng)頁(yè)字體大小的控制。 
  41.                 jQuery應(yīng)用與網(wǎng)頁(yè)字體大小的控制。 
  42.                 jQuery應(yīng)用與網(wǎng)頁(yè)字體大小的控制。 
  43.                 jQuery應(yīng)用與網(wǎng)頁(yè)字體大小的控制。 
  44.                 jQuery應(yīng)用與網(wǎng)頁(yè)字體大小的控制。 
  45.                 jQuery應(yīng)用與網(wǎng)頁(yè)字體大小的控制。 
  46.                 jQuery應(yīng)用與網(wǎng)頁(yè)字體大小的控制。 
  47.             </div> 
  48.         </div> 
  49.     </body> 
  50. </html> 

 

創(chuàng)新互聯(lián)建站是少有的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、營(yíng)銷(xiāo)型企業(yè)網(wǎng)站、微信小程序、手機(jī)APP,開(kāi)發(fā)、制作、設(shè)計(jì)、賣(mài)友情鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,成立與2013年,堅(jiān)持透明化,價(jià)格低,無(wú)套路經(jīng)營(yíng)理念。讓網(wǎng)頁(yè)驚喜每一位訪客多年來(lái)深受用戶(hù)好評(píng)

文章題目：jQuery應(yīng)用與網(wǎng)頁(yè)字體大小控制
分享網(wǎng)址：http://bm7419.com/article28/gosijp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站策劃、微信小程序、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)