javascript实现一段文字展开、收起（默认展开）

来源：互联网发布：吉林卫生系统网络直报编辑：程序博客网时间：2024/06/05 03:23

上一篇已经介绍文字默认收起，这篇介绍javascript实现一段文字展开、收起（默认展开）

在线演示

这里写图片描述

html：

<div id="div1">      2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。     <a href="javascript:;"><<收起</a></div>

css：

<style type="text/css">    #div1 {width: 600px; background: lightblue; margin: 0 auto;line-height: 26px;}    a {text-decoration: none;color: red;}</style>

javascript：

<script>      var oDiv=document.getElementById('div1');//获取文字的盒子      var oA=oDiv.getElementsByTagName('a');//获取 a 标签      var onOff=true;      var old='';      oA[0].onclick=function move(){ //a 链接点击后执行 move 函数          if(onOff){  //判断              onOff=false;              old=oDiv.innerHTML;              oDiv.innerHTML=oDiv.innerHTML.substring(0,65)+'...<a href="javascript:;"> >>展开 </a>';//默认显示65个字符，字符末尾添加 “...>>展开”              oA=oDiv.getElementsByTagName('a');              oA[0].onclick=move;          }else{              onOff=true;              oDiv.innerHTML=old;              oA=oDiv.getElementsByTagName('a');              oA[0].onclick=move;          }      }</script>

1 0