【JavaScript】作全文和收起功能

2021年07月23日 阅读数:14
这篇文章主要向大家介绍【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