javascript实现文字隐藏、展开收起的简单示例
人气：878 时间：2018-10-30
这篇文章主要为大家详细介绍了javascript实现文字隐藏、展开收起的简单示例，具有一定的参考价值，可以用来参考一下。
感兴趣javascript实现文字隐藏、展开收起的简单示例的小伙伴，下面一起跟随512笔记的小编罗X来看看吧。<br>
<script type="text/javascript">
function init(){
var len = 14; //默认显示字数
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?"<img src='d:\\right.jpeg' width='15' height='15' />展开":""; //设置a的显示
a.href = "javascript:void(0)";
a.onclick = function(){
if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"则显示"收起"
a.innerHTML = "<img src='d:\\up.jpeg' width='15' height='15' />收起";
span.innerHTML = content;
}else{
a.innerHTML = "<img src='d:\\right.jpeg' width='15' height='15' />展开";
span.innerHTML = content.substring(0,len);
}
}
// 设置div内容为空，span元素 a元素加入到div中
ctn.innerHTML = "";
ctn.appendChild(span);
ctn.appendChild(a);
}
</script>
<body onl oad="init()">
<div id="content">
那片笑声让我想起我的那些花儿</br>
在我生命每个角落静静为我开着</br>
我曾以为我会永远守在他身旁</br>
今天我们已经离去在人海茫茫
</div>
</body>
</html>
注：关于javascript实现文字隐藏、展开收起的简单示例的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。
关键词：文字隐藏
您可能感兴趣的文章
转载请注明出处：512笔记
最新文章