首頁 > 開發者 > JavaScript
文章的篇幅往往不是那麼恰到好處，如果以原有的篇幅展示，那麼有可能會影響網頁的布局或者美觀度，這個時候就要根據情況適量截取一定的字串，以適應布局，不過當點擊一個按鈕的時候依然可以展開全部的內容，下面就通過一個執行個體詳細介紹一下如何?此效果,程式碼範例如下:
<!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">雲棲社區歡迎您，個人的力量再強也只是一隻強壯的而已，如果有分享和胸懷和合作的精神，那麼就有可能活得巨大進步。</div> </body></html>
以上代碼實現了我們的要求，截取指定的字串，後面以"..."結尾，當點擊這個結尾的時候，能夠展開所有的文字內容，下面就介紹一下此效果的實現過程。
一.實現原理:
建立一個span元素和a元素，然後使用substring()函數截取指定的字串並將其設定為span元素的內容，然後判斷原來字串的長度是否大於指定長度，如果大於，則將a元素中的內容設定為"..."。然後將原有div清空，然後span元素和a元素添加到div中去，這樣就實現了截取功能。為a元素註冊時間處理函數，點擊此按鈕就會執行事件處理函數，此函數首先判斷是出於何種狀態，如果處於收合狀態，那麼就會將a元素中的內容設定為"收合"，並且將原有所有字元放入span，這樣就實現了展開，如果出於展開狀態，那麼就是截取字元和修改a元素中的內容。原理大體如此，可以參閱相關閱讀。
以上內容是本文給大家介紹的JavaScript截取指定長度字串點擊可以展開全部代碼 ，希望大家喜歡。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
