JavaScript段落展开收起效果
JavaScript段落展开收起效果属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了段落的展开和收起的效果。
通常用于解决大段落文本占用空间过多。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#box {
width: 280px;
border: #999 1px solid;
padding: 10px;
}
p {
line-height: 24px;
}
a {
color: #096;
cursor: pointer;
}
</style>
<script>
window.onload = function () {
textShow(box, 30)
}
function textShow(obj, num) {
var oSpan = obj.getElementsByTagName("span")[0];
var oA = obj.getElementsByTagName("a")[0];
var str = oSpan.innerHTML;
var onOff = true;
oSpan.innerHTML = str.substring(0, num);
oA.onclick = function () {
if (onOff) {
oSpan.innerHTML = str;
oA.innerHTML = "收起";
} else {
oSpan.innerHTML = str.substring(0, num);
oA.innerHTML = "...展开";
}
onOff = !onOff;
}
}
</script>
</head>
<body>
<div id="box">
<p>
<span>前端教程网欢迎您，本站的url地址是www.pipipi.net，随时提供有益的建议和意见</span>
<a>展开..</a>
</p>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.textShow(box, 30),此函数的功能在下面会介绍。
（3）.function textShow(obj, num) {}，此函数实现了展开收起功能，第一个参数是是元素对象，这里是div元素的id属性值，id属性值可以直接作为对象使用，第二个参数规定显示的字符数量，超出的用省略号替代。
（4）.var oSpan = obj.getElementsByTagName("span")[0]，获取span元素集合中的第一个span元素对象。
（5）.var oA = obj.getElementsByTagName("a")[0]，获取链接a元素集合中的第一个a元素对象。
（6）.var str = oSpan.innerHTML，将span元素中html内容赋值给变量str，暂时存储起来。
（7）.var onOff = true，声明一个变量并赋值为true，作为一个标识。
（8）. oSpan.innerHTML = str.substring(0, num)，将截取指定长度的html内容写入span元素中。
（9）. oA.onclick = function () {}，为链接a元素注册onclick事件处理函数。
（10）.if (onOff) {
oSpan.innerHTML = str;
oA.innerHTML = "收起";
}，如果onOff等于true。
那么就将oA的html内容设置为str。
同时链接a元素的html内容设置为"收起"。
（11）.else { oSpan.innerHTML = str.substring(0, num);
oA.innerHTML = "展开...";
},否则的话，span元素的内容设置为截取后的html字符串。
并且将链接a的html设置为"展开..."。
（12）.onOff = !onOff，取反。
二.相关阅读:
（1）.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（2）.innerHTML参阅innerHTML一章节。
（3）.substring()参阅javascript substring()一章节。
JavaScript段落展开收起效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript段落展开收起效果就介绍到这了。