jQuery實現設定字型大小程式碼例項

admin發表於2017-03-09
jQuery

設定網頁中字型的大小是常見的操作，下面就通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
.bigger,.smaller{ 
  cursor:pointer 
} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
  $("span").click(function(){
    var thisEle=$("#para").css("font-size"); 
    var textFontSize=parseFloat(thisEle,10);
    var unit=thisEle.slice(-2);
    var cName=$(this).attr("class");
    if(cName=="bigger"){
      textFontSize+= 2;
    }
    else if(cName=="smaller"){
      textFontSize-=2;
    }
    $("#para").css("font-size", textFontSize+unit);
  });
});
</script>
</head>
<body>
<div class="msg">
  <div class="msg_caption"> 
    <span class="bigger" >放大</span> 
    <span class="smaller" >縮小</span> 
  </div>
  <div><p id="para">螞蟻部落</p></div>
</div>
</body>
</html>

以上程式碼實現了我們的要求，可以實現文字內容的放大和縮小效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.$(function(){})，當文字結構完全載入完畢之後再去執行函式中的程式碼。

2.$("span").click(function(){})，為span元素註冊click事件處理函式。

3.var thisEle=$("#para").css("font-size")，獲取id屬性值為para元素下文字字型的大小。

4.var textFontSize=parseFloat(thisEle,10)，將字型大小轉換成數值型別。

5.var unit=thisEle.slice(-2)，擷取字串，也就是擷取最後兩位，也就是單位(px)。

6.var cName=$(this).attr("class")，獲取當前點選span元素的class屬性值。

7.if(cName=="bigger"){textFontSize+= 2;}，如果點選是放大按鈕就將字型放大。

8.$("#para").css("font-size", textFontSize+unit)，設定字型大小。

二.相關閱讀:

1.click事件可以參閱jQuery click事件一章節。

2.css()函式可以參閱jQuery css()一章節。

3.parseFloat()函式可以參閱javascript parseFloat()一章節。  

4.slice()函式可以參閱javascript String slice()一章節。 

5.attr()函式可以參閱jQuery attr()一章節。

相關文章