溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript實現(xiàn)隱藏省略文字效果的方法

發(fā)布時間：2020-09-23 16:08:13 來源：腳本之家 閱讀：230 作者：ruxingli 欄目：web開發(fā)

本文實例講述了JavaScript實現(xiàn)隱藏省略文字效果的方法。分享給大家供大家參考，具體如下：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>JS</title>
  </head>
<body>
  <div id="content">有一種心態(tài)叫放下；有一種境界叫舍得；有一種幸福叫守候；有一種智慧叫低調(diào)；有一種選擇叫放棄；有一種明白叫糊涂；有一種心態(tài)叫包容；有一種快樂叫簡單；有一種美德叫微笑；有一種幸福叫珍惜；有一種美麗叫自信；有一種感動叫分享；有一種真情叫關(guān)愛；有一種溫暖叫感恩；有一種成功叫堅持。
  </div>
<script language="javascript">
  (function(){
    var len = 50; // 默認(rèn)顯示的字?jǐn)?shù)
    var content = document.getElementById("content"); // content 獲取內(nèi)容 div 對象
    var text = content.innerHTML;  // text 為內(nèi)容
    var span = document.createElement("span"); // 創(chuàng)建一個 SPAN 標(biāo)簽
    var n = document.createElement("a");  // 創(chuàng)建一個 A 標(biāo)簽
    span.innerHTML = text.substring(0,len); // SPAN 標(biāo)簽的內(nèi)容為 text 的前 len 個字符
    n.innerHTML = text.length > len ? "..展開" : ""; // 創(chuàng)建的 A 標(biāo)簽內(nèi)容，如果內(nèi)容字?jǐn)?shù)大于 len，那么為“..展開”，否則為空
    n.href = "javascript:void(0)"; // 設(shè)置 A 標(biāo)簽的鏈接地址（隨意）
    n.onclick = function(){ // 點擊 A 鏈接執(zhí)行下面函數(shù)
    // 如果 A 標(biāo)簽的內(nèi)容為“..展開”，那么 A 標(biāo)簽內(nèi)容變成“收起”，SPAN 標(biāo)簽的內(nèi)容為 DIV 全部內(nèi)容，否則內(nèi)容為前 len 個字符
    if (n.innerHTML == "..展開"){
      n.innerHTML = "收起";
      span.innerHTML = text;
    }else{
      n.innerHTML = "..展開";
      span.innerHTML = text.substring(0,len);
    }
   }
    content.innerHTML = "";   // 設(shè)置 DIV 內(nèi)容為空
    content.appendChild(span); // 把 SPAN 元素加到 DIV 中
    content.appendChild(n);   // 把 A 元素加到 DIV 中
  })();
</script>
</body>
</html>

效果圖：

JavaScript實現(xiàn)隱藏省略文字效果的方法

JavaScript實現(xiàn)隱藏省略文字效果的方法

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript字符與字符串操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手