最近開始學習前端，想要設計一個類似csdn的博客，在閱讀時可以先閱讀部分內容，然後點擊繼續閱讀按鈕可以閱讀剩下的部分，類似這樣的
然後看了一下csdn的做法，發現這個包含文章內容的框設置了高度，所以剩下的文字被截去了，但是其實還是被加載在了網頁中，只是沒有顯示出來。大體思路就是先把這個按鈕綁定一個事件，在按下按鈕後調用相應的方法函數。即在函數中移除高度的屬性，那麼，關鍵來了，它用到了這麼一個方法：removeAttr()，在引用這個方法時一定要引入jQuery的包，在W3school中，這個函數的定義是這樣的
好了，我就爲我的文章框設置了500px的高度，剩下的部分就被隱藏了，然後在button上綁定了這個事件
<div id="article_content" class="article_content clearfix">
...文章內容...
<a id="btn-readmore"><button class="btn btn-info" onclick="btn_click()">閱讀更多</button></a>然後寫了這個函數
<script>
function btn_click() {
var articleBox = $(".article_content"); //獲取文章框的class
//articleBox.css('height','800px'); //直接設置css屬性也可以，但是不方便
alert(articleBox.removeAttr('height') ;
console.log(articleBox.height);
alert("btn_click被調用了!");
};
</script>我就直接移除了height的屬性，這下大功告成了吧，但是事情還沒完，點擊按鈕後沒有任何的變化，在控制檯看到articleBox的高度任然還是500，這就奇怪了，不是可以消除屬性嗎，這下就讓我矇蔽了。
我繼續在W3school裏面找解決辦法，發現裏面的代碼是這樣的
$(document).ready(function(){
$("button").click(function(){
$("p").removeAttr("style");
});
});
</script>
...
<p style="font-size:120%;color:red">這是一個段落。</p>那會不會在removeAttr方法中制定元素的屬性必須是類似class，style，id這些鍵值呢，我又嘗試了一下，把函數中的remove方法更改成這樣：
articleBox.removeAttr('class');重新點擊按鈕，發現成功了！
在W3school中我嘗試這樣寫：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").removeAttr("id");
});
});
</script>
<style>
#pcolor {
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1>這是一個標題</h1>
<p id="pcolor">這是一個段落。</p>
<p>這是另一個段落。</p>
<button>刪除所有 p 元素的 style 屬性</button>
</body>
</html>點擊刪除按鈕後也成功了。
說了這麼多，上面的都是廢話，下面纔是重點：
removeAttr的這個坑就是函數調用的參數只能是你想刪除的屬性的所對應的鍵值，如果你想刪除.demo{height:500px;}中的height屬性，那麼調用的參數就是removeAttr(‘class’),這個class所對應的所有屬性都會被移除，所以調用的參數也就只能是id,class,style等等，如果你想只刪除一個屬性，那麼你就只能讓id或者class只對應一個。