【JavaScript】作全文和收起功能

function init(){
        var len = 60;      //默認顯示字數
        var ctn = document.getElementById("content");  //獲取div對象
        var content = ctn.innerHTML;                   //獲取div裏的內容

        //alert(content);
        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);
     }
     init();

效果圖:javascript

 

相關文章
相關標籤/搜索