點選檢視全部，顯示其餘內容
<style>
#myarticle{
width:700px;
height:300px;
overflow-y:hidden;
border:1px solid green;
margin:20px auto;
}
p{
text-indent: 2em;
margin-bottom: 10px;
}
button{
width:700px;
margin:10px auto;
text-align: center;
display: none;
}
#btn{
display: none;
margin-top: -42px;
position: relative;
z-index: 9999;
}
</style>
<div id="myarticle">
<p>你們好！首先，你們看到的這個標題夠“屌”的吧？！這是我13歲女兒對我的暱稱。您別以為這小傢伙“沒大沒小的沒家教”或是什麼“問題少年”，恰恰相反，我的女兒挺優秀，小學畢業前得過“北京市紅領巾獎章”，作文集被人民郵電出版社出版過（她不讓到處說）……老漢自認為在教育孩子上有點經驗，所以在“攜手線上”和大家分享，既是為“攜手線上”吶喊助威，也是“幼吾幼以及人之幼”吧，期望您多少有點收穫。</p>
<p>其次，您別指望從我這兒能學到什麼。世界上找不到兩片完全一樣的樹葉，更何況人了？！我怎麼教育孩子，只適用於我女兒，與您的娃沒有半毛錢關係，尤其是血緣上（夠屌吧）！可話又說回來了，“隔行如隔山，但隔行不隔理”，畢竟孩子是大人的“簡裝版”，都會餓吃、困睡，見好處就上、見麻煩就躲……所謂進步，就是不斷消除無知、克服缺點、糾正錯誤的過程，就是不斷改掉壞毛病、養成好習慣、修煉優良作風與涵養的過程，就是不斷追尋、發現、遵從和捍衛真理的過程。這些道理是相通的，因此，您看了我的話，也許能有所啟發，這工夫就沒白花。</p>
<p>最後，在單位上班，幾乎所有人都被提醒過：“領導交辦的事情不好好做，還想不想在這兒混了？！”同理，男歡女愛造人容易，給什麼孩子可就是上天的事了。孩子是上天賜予的禮物和任務，我們應常懷敬畏之心、竭盡渾身吃奶之力，要“在孩子的引領下，跑在孩子前面（這句話更屌，您轉過彎兒了嗎）”，讓孩子教會我們，我們再影響孩子。“上天交辦的事情不好好做，還想不想活了？！”</p>
<p>說到單位，屌叔也是有單位的人，作為志願者和“攜手線上”的粉絲（簡稱手撕，然後牛肉、雞肉的有木有？肚子咕咕叫、口水往下流的有木有）在這裡乾點善事，一定為“攜手線上”和網友們盡心竭力。不過，既然東家給俺發工資，咱也得給東家好好幹活不是？！即使不能貼金，起碼不能讓東家丟臉吧！因此，屌叔有空就會與大家聊聊，沒空您也別……就是沒空唄。如果有什麼問題，您儘管留言，屌叔一定答覆，就是時間沒準，屌唄！</p>
<p>BTW，取名屌叔，還因為必須說點屌事，以後大家慢慢懂呵……</p>
<p>非常感謝女兒和她同年同月同日生的小夥伴，是兩個孩子的四隻小手，牽起了兩個家長的四隻大手（八爪魚有木有），攜手線上為您忽悠，還要感謝攜手線上的姑娘、小夥們，你們應該的呵！</p>
<p>22222222222222222222222222222222222222222</p>
<p>22222222222222222222222222222222222222222</p>
<p>22222222222222222222222222222222222222222</p>
<p>22222222222222222222222222222222222222222</p>
<p>22222222222222222222222222222222222222222</p>
<p>22222222222222222222222222222222222222222</p>
<p>22222222222222222222222222222222222222222</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<button id="btn">檢視更多……</button>
<script>
var btn = document.getElementById('btn');
var obj = document.getElementById('myarticle');
var p = obj.getElementsByTagName('p');
var height = '';
for(var i=0;i<p.length;i++){
height += p[i].scrollHeight;
// console.log(p[i].scrollHeight)
height++;
}
console.log(height)
// console.log(p[1].scrollHeight)
var total_height = obj.scrollHeight;//文章總高度
console.log(total_height)
var show_height = 500;//定義原始顯示高度
if(total_height>show_height){
btn.style.display = 'block';
btn.onclick = function(){
obj.style.height = total_height + 'px';
btn.style.display = 'none';
}
}
</script>