JavaScript截取指定長度字串點選可以展開全部程式碼

首頁

web前端

js教程

JavaScript截取指定長度字串點選可以展開全部程式碼_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

文章的篇幅往往不是那麼恰到好處，如果以原有的篇幅展示，那麼有可能會影響網頁的佈局或者美觀度，這個時候就要根據情況適量截取一定的字符串，以適應佈局，不過當點擊一個按鈕的時候依然可以展開全部的內容，以下就透過一個實例詳細介紹一下如何實現此效果,程式碼範例如下:

<!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&#63;"...":""; 
 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截取指定長度字串點擊可以展開全部程式碼，希望大家喜歡。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7773

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。