快捷導(dǎo)航

JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼

更新時(shí)間：2015年12月04日 10:17:08 作者：程序員小菜

這篇文章主要介紹了JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼的相關(guān)資料,需要的朋友可以參考下

文章的篇幅往往不是那么恰到好處，如果以原有的篇幅展示，那么有可能會(huì)影響網(wǎng)頁(yè)的布局或者美觀度，這個(gè)時(shí)候就要根據(jù)情況適量截取一定的字符串，以適應(yīng)布局，不過當(dāng)點(diǎn)擊一個(gè)按鈕的時(shí)候依然可以展開全部的內(nèi)容，下面就通過一個(gè)實(shí)例詳細(xì)介紹一下如何實(shí)現(xiàn)此效果,代碼示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>字符串截取展開效果</title>
<style type="text/css">
#thediv{
 width:200px;
 margin:0px auto;
}
</style>
<script type="text/javascript"> 
function cutStr(){ 
 var odiv=document.getElementById("thediv"); 
 var str=odiv.innerHTML; 
 var ospan=document.createElement("span"); 
 var olink=document.createElement("a"); 
 ospan.innerHTML=str.substring(0,20); 
 olink.innerHTML=str.length>20?"...":""; 
 olink.href="###"; 
 olink.onclick=function(){ 
  if(olink.innerHTML=="..."){ 
   olink.innerHTML="收起"; 
   ospan.innerHTML=str; 
  }
  else{ 
   olink.innerHTML="..."; 
   ospan.innerHTML=str.substring(0,20); 
  } 
 } 
 odiv.innerHTML=""; 
 odiv.appendChild(ospan); 
 odiv.appendChild(olink); 
}; 
window.onload=function(){
 cutStr();
}
</script> 
<body>
<div id="thediv">腳本之家歡迎您，個(gè)人的力量再?gòu)?qiáng)也只是一只強(qiáng)壯的而已，如果有分享和胸懷和合作的精神，那么就有可能活得巨大進(jìn)步。</div> 
</body>
</html>

以上代碼實(shí)現(xiàn)了我們的要求，截取指定的字符串，后面以"..."結(jié)尾，當(dāng)點(diǎn)擊這個(gè)結(jié)尾的時(shí)候，能夠展開所有的文字內(nèi)容，下面就介紹一下此效果的實(shí)現(xiàn)過程。

一.實(shí)現(xiàn)原理:

創(chuàng)建一個(gè)span元素和a元素，然后使用substring()函數(shù)截取指定的字符串并將其設(shè)置為span元素的內(nèi)容，然后判斷原來(lái)字符串的長(zhǎng)度是否大于指定長(zhǎng)度，如果大于，則將a元素中的內(nèi)容設(shè)置為"..."。然后將原有div清空，然后span元素和a元素添加到div中去，這樣就實(shí)現(xiàn)了截取功能。為a元素注冊(cè)時(shí)間處理函數(shù)，點(diǎn)擊此按鈕就會(huì)執(zhí)行事件處理函數(shù)，此函數(shù)首先判斷是出于何種狀態(tài)，如果處于收起狀態(tài)，那么就會(huì)將a元素中的內(nèi)容設(shè)置為"收起"，并且將原有所有字符放入span，這樣就實(shí)現(xiàn)了展開，如果出于展開狀態(tài)，那么就是截取字符和修改a元素中的內(nèi)容。原理大體如此，可以參閱相關(guān)閱讀。

以上內(nèi)容是本文給大家介紹的JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼，希望大家喜歡。

您可能感興趣的文章: