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>
