纯javaScript实现指定长度文字展开与收起功能（默认收起）-网页编程网

当前位置：主页 >> 网页特效 >> 正文

纯javaScript实现指定长度文字展开与收起功能（默认收起）

阅读：2646 输入：2021-04-18 20:03:44

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #content {
      width: 500px;
      background-color: #ccc;
      line-height: 26px;
    }
    a {
      text-decoration: none;
      color: red;
    }
  </style>
</head>
<body onload="init()">
  <div id="content">
该数据库由RMaps应用程序使用。当将地图移动到最大缩放时的某些部分时，应用程序将突然关闭。但是，没有强制关闭消息，没有报告按钮。所以，我有一个想法，它是由阅读块超出一定的限制， MAX(INT)。由于RMaps只是使用简单的SQL语句，我认为问题不在于RMaps而是Android SQLite驱动程序。
  </div>
  <script>
     function init(){
        var len = 60;      //默认显示字数
        var ctn = document.getElementById("content");  //获取div对象
        var content = ctn.innerHTML;                   //获取div里的内容

//alert(content);
        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.onclick = function(){
            if(a.innerHTML.indexOf("展开")>0){      //如果a中含有"展开"则显示"收起"
              a.innerHTML = "<< 收起";
              span.innerHTML = content;
            }else{
                a.innerHTML = "... 展开";
                span.innerHTML = content.substring(0,len);
            }
        }
        // 设置div内容为空，span元素 a元素加入到div中
        ctn.innerHTML = "";
        ctn.appendChild(span);
        ctn.appendChild(a);
     }
  </script>
a.innerHTML = content.length>len?"<img src='images/right.png' width='15' height='15' />展开":"";  //设置a的显示  
</body>

上一篇：通过js的事件取得radio的值
下一篇：php操作Sqlite分页类，可自定义模板

相关阅读: js实现点击表头表格自动排序（含数字、字符串、日期）; js移动前端调试工具vconsole; js实现浏览器全屏与工具栏隐藏