javascript实现文字隐藏 展开收起

时间：2022-03-24 22:06:15
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7. <script type="text/javascript">  
  8.    function init(){  
  9.       var len = 14;      //默认显示字数  
  10.       var ctn = document.getElementById("content");  //获取div对象  
  11.       var content = ctn.innerHTML;                   //获取div里的内容  
  12.       
  13.       //alert(content);  
  14.       var span = document.createElement("span");     //创建<span>元素  
  15.       var a = document.createElement("a");           //创建<a>元素  
  16.       span.innerHTML = content.substring(0,len);     //span里的内容为content的前len个字符  
  17.       a.innerHTML = content.length>len?"<img src='d:\\right.jpeg' width='15' height='15' />展开":"";  //设置a的显示  
  18.       a.href = "javascript:void(0)";  
  19.       a.onclick = function(){  
  20.           if(a.innerHTML.indexOf("展开")>0){      //如果a中含有"展开"则显示"收起"  
  21.             a.innerHTML = "<img src='d:\\up.jpeg' width='15' height='15' />收起";  
  22.             span.innerHTML = content;  
  23.           }else{  
  24.               a.innerHTML = "<img src='d:\\right.jpeg' width='15' height='15' />展开";  
  25.               span.innerHTML = content.substring(0,len);  
  26.           }  
  27.       }  
  28.       // 设置div内容为空，span元素 a元素加入到div中  
  29.       ctn.innerHTML = "";  
  30.       ctn.appendChild(span);  
  31.       ctn.appendChild(a);  
  32.         
  33.    }  
  34.      
  35. </script>  
  36. <body onload="init()">  
  37. <div id="content">  
  38.     那片笑声让我想起我的那些花儿</br>  
  39.     在我生命每个角落静静为我开着</br>  
  40.     我曾以为我会永远守在他身旁</br>  
  41.     今天我们已经离去在人海茫茫  
  42. </div>  
  43. </body>  
  44. </html>  

截图

javascript实现文字隐藏 展开收起

javascript实现文字隐藏 展开收起
标签：

相关文章