JS 实现段落展开和收起
作者：互联网
实现
实现如图所示的段落展开和收起功能：
分析
<div class="box">
<p id="content">
人生最美是清欢；愿有一屋，不被打扰，幸福终老 ；一袭江南梦，醉卧烟雨中；春在水墨中发芽
恬淡，禅里开出的花 ；寻得一方庭院，做匠人 ；有一个院子，种花，画画 ；春未暖,花先开
中国青花蓝，惊艳世界 ；寻一扇窗子，找到一份静心 ；拖地浇花，春暖花开 ；寻一个小镇，守一人终老。<br>
人生如一场修行，得意时，“一日看尽长安花”，艰难时，“潦倒新停浊酒杯”，但生命的跋涉不能回头，
哪怕“畏途巉岩不可攀，也要“会当凌绝顶”，哪怕“无人会登临意”，也要“猛志固常在”，
从经典中汲取“九万里风鹏正举”的力量，历练“也无风雨也无晴”的豁然，“待到重阳日”，我们“还来就菊花”。
</p>
</div>
对此段落实现展示前100字，剩下的内容收起。
- 获取该元素的 id 并得到段落全部内容
- 创建标签<span>，并把 id 里面的前100字放进去
- 创建标签<a>,设为展开收起，点击实现效果
- 设置 id 内容为空，把标签<span>和<a>插入进 id
js思想实现
<head>
<meta charset="UTF-8">
<title>段落展开和收起</title>
<style>
.box {
margin: 0 auto;
width: 400px;
height: 300px;
border: 1px solid cadetblue;
background-color: #efefef;
border-radius: 10px;
font-size: 15px;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box">
<p id="content">
人生最美是清欢；愿有一屋，不被打扰，幸福终老 ；一袭江南梦，醉卧烟雨中；春在水墨中发芽
恬淡，禅里开出的花 ；寻得一方庭院，做匠人 ；有一个院子，种花，画画 ；春未暖,花先开
中国青花蓝，惊艳世界 ；寻一扇窗子，找到一份静心 ；拖地浇花，春暖花开 ；寻一个小镇，守一人终老。<br>
人生如一场修行，得意时，“一日看尽长安花”，艰难时，“潦倒新停浊酒杯”，但生命的跋涉不能回头，
哪怕“畏途巉岩不可攀，也要“会当凌绝顶”，哪怕“无人会登临意”，也要“猛志固常在”，
从经典中汲取“九万里风鹏正举”的力量，历练“也无风雨也无晴”的豁然，“待到重阳日”，我们“还来就菊花”。
</p>
</div>
<script>
window.onload = function show(){
var len = 100; //默认显示字数
var con = document.getElementById('content');
var content = con.innerHTML; //获取段落内容
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链接点击不跳转
//点击时修改span标签还有a标签
a.onclick = function (){
if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"点击后则显示"收起"
a.innerHTML = "<< 收起";
span.innerHTML = content; //span标签显示所有字数
}else{
a.innerHTML = "... 展开";
span.innerHTML = content.substring(0,len);
}
}
// 设置p内容为空，span元素 a元素加入到p中
con.innerHTML = "";
con.appendChild(span);
con.appendChild(a);
}
</script>
</body>
标签：段落,span,innerHTML,JS,content,收起,var 来源： https://www.cnblogs.com/WuAnqi/p/15517378.html