【JavaScript】實現全文收起功能

1. js代碼

這裏的這個id是元素的id，由於數據不可能只有一條，因此須要動態來處理

function init(id){ 
        var len = 60;      //默認顯示字數
        var ctn = document.getElementById(id);  //獲取div對象
        var content = ctn.innerHTML;                   //獲取div裏的內容
        var span = document.createElement("span");     //建立<span>元素
        var a = document.createElement("a");           //建立<a>元素
        span.innerHTML = content.substring(0,len);     //span裏的內容爲content的前len個字符
        a.innerHTML = content.length>len?" 全文":"";  判斷顯示的字數是否大於默認顯示的字數 來設置a的顯示
        a.href = "javascript:void(0)";//讓a連接點擊不跳轉
        a.onclick = function(){ 
            if(a.innerHTML.indexOf("全文")>0){       //若是a中含有"展開"則顯示"收起"
              a.innerHTML = "收起";
              span.innerHTML = content;
            }else{ 
                a.innerHTML = " 全文";
                span.innerHTML = content.substring(0,len);
            }
        };
        // 設置div內容爲空，span元素 a元素加入到div中
        ctn.innerHTML = "";
        ctn.appendChild(span);
        ctn.appendChild(a);
     }

2. 引用

這裏切記須要處理一下，在以前碰到了獲取不到頁面的元素，最後把js的執行放到元素加載完在執行，而且把元素的id值加上數據id給傳過去便可

3. html代碼

模板引擎使用的是template

4. 效果