JavaScript 檢視全文和收起

admin發表於2019-01-18
JavaScript

分享一段程式碼例項，它實現了點選檢視詳情會展開所有內容，點選收起會收縮內容的功能。

特別說明：為了節省篇幅，演示的文章內容只有很少字數，大家可以自行增加測試。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: red;
}
body {
  font-size: 14px;
}
.box {
  border: 1px solid #000000;
  width: 500px;
  padding: 10px;
  margin-bottom: 20px;
}
  
</style>
<script>
window.onload = function() {
  function new_detail(obj, row) {
    var oSpan = obj.getElementsByTagName('span')[0];
    var tet = '螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來，本站url地址是softwhy.com';
    var pad_tet = tet.substr(0, row)
    var pen = true;
    var oA = obj.getElementsByTagName('a')[0];
    oSpan.innerHTML = pad_tet + '......';
    oA.onclick = function() {
      if (pen) {
        oSpan.innerHTML = tet;
        pen = false;
        this.innerHTML = '[收起]'
      } else {
        oSpan.innerHTML = pad_tet + '......';
        pen = true;
        this.innerHTML = '[詳情]'
      };
    };
  };
  new_detail(box, 20)
}
</script>
</head>
<body>
  <div class="box" id="box">
    <p>
      <span></span>
      <a href="javascript:;">[詳情]</a>
    </p>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

一.相關閱讀:

（1）.window.onload = function() {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.function new_detail(obj, row) {}，第一個引數是一個元素物件，第二個引數規定顯示字元的數目。

（3）.var oSpan = obj.getElementsByTagName('span')[0]，獲取第一個span元素物件。

（4）.var tet = '螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來，本站url地址是softwhy.com'，文字內容。

（5）.var pad_tet = tet.substr(0, row)，擷取指定長度的字串。

（6）.var pen = true，宣告一個變數並賦值為true，作為一個標識，後面會用到。

（7）.var oA = obj.getElementsByTagName('a')[0]，獲取第一個連結a元素物件。

（8）.oSpan.innerHTML = pad_tet + '......'，span元素中的內容為擷取的字串，並且後面帶有省略號。

（9）.oA.onclick = function() {

  if (pen) {

    oSpan.innerHTML = tet;

    pen = false;

    this.innerHTML = '[收起]'

  } else {

    oSpan.innerHTML = pad_tet + '......';

    pen = true;

    this.innerHTML = '[詳情]'

  };

}，如果pen是true，說明處於收起狀態，那麼點選按鈕就會出現展開效果，span元素的值會被賦值為let儲存的字串。被點選按鈕的內容也被修改為'[收起]'。else語句的作用與上面恰好相反。

二.相關閱讀:

（1）.getElementsByTagName()參閱document.getElementsByTagName()一章節。

（2）.substr()參閱JavaScript substr()一章節。

（3）.innerHTML參閱JavaScript innerHTML一章節。

相關文章