html文字折叠隐藏出现问题,javascript实现文字隐藏、展开收起的简单示例

感兴趣javascript实现文字隐藏、展开收起的简单示例的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。

function init(){

var len = 14; //默认显示字数

var ctn = document.getElementById("content"); //获取div对象

var content = ctn.innerHTML; //获取div里的内容

//alert(content);

var span = document.createElement("span"); //创建元素

var a = document.createElement("a"); //创建元素

span.innerHTML = content.substring(0,len); //span里的内容为content的前len个字符

a.innerHTML = content.length>len?"展开":""; //设置a的显示

a.href = "javascript:void(0)";

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);

}

那片笑声让我想起我的那些花儿

在我生命每个角落静静为我开着

我曾以为我会永远守在他身旁

今天我们已经离去在人海茫茫