JavaScript实现隐藏省略文字效果的方法


Posted in Javascript onApril 27, 2017

本文实例讲述了JavaScript实现隐藏省略文字效果的方法。分享给大家供大家参考,具体如下:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
    <title>JS</title>
  </head>
<body>
  <div id="content">有一种心态叫放下;有一种境界叫舍得;有一种幸福叫守候;有一种智慧叫低调;有一种选择叫放弃;有一种明白叫糊涂;有一种心态叫包容;有一种快乐叫简单;有一种美德叫微笑;有一种幸福叫珍惜;有一种美丽叫自信;有一种感动叫分享;有一种真情叫关爱;有一种温暖叫感恩;有一种成功叫坚持。
  </div>
<script language="javascript">
  (function(){
    var len = 50; // 默认显示的字数
    var content = document.getElementById("content"); // content 获取内容 div 对象
    var text = content.innerHTML;  // text 为内容
    var span = document.createElement("span"); // 创建一个 SPAN 标签
    var n = document.createElement("a");  // 创建一个 A 标签
    span.innerHTML = text.substring(0,len); // SPAN 标签的内容为 text 的前 len 个字符
    n.innerHTML = text.length > len ? "..展开" : ""; // 创建的 A 标签内容,如果内容字数大于 len,那么为“..展开”,否则为空
    n.href = "javascript:void(0)"; // 设置 A 标签的链接地址(随意)
    n.onclick = function(){ // 点击 A 链接执行下面函数
    // 如果 A 标签的内容为“..展开”,那么 A 标签内容变成“收起”,SPAN 标签的内容为 DIV 全部内容,否则内容为前 len 个字符
    if (n.innerHTML == "..展开"){
      n.innerHTML = "收起";
      span.innerHTML = text;
    }else{
      n.innerHTML = "..展开";
      span.innerHTML = text.substring(0,len);
    }
   }
    content.innerHTML = "";   // 设置 DIV 内容为空
    content.appendChild(span); // 把 SPAN 元素加到 DIV 中
    content.appendChild(n);   // 把 A 元素加到 DIV 中
  })();
</script>
</body>
</html>

效果图:

JavaScript实现隐藏省略文字效果的方法

JavaScript实现隐藏省略文字效果的方法

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐base.js
Dec 23 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
Vue 按键修饰符处理事件的方法
May 04 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 #Javascript
JavaScript实现反转字符串的方法详解
Apr 27 #Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
js实现添加删除表格(两种方法)
Apr 27 #Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
vue2 前后端分离项目ajax跨域session问题解决方法
Apr 27 #Javascript
You might like
php扩展ZF――Validate扩展
2008/01/10 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
javascript生成大小写字母
2015/07/03 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
JavaScript Date对象功能与用法学习记录
2020/04/28 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
从零学Python之入门(二)基本数据类型
2014/05/25 Python
Python学习笔记之os模块使用总结
2014/11/03 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
Python tkinter模版代码实例
2020/02/05 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
python中最小二乘法详细讲解
2021/02/19 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
银行求职推荐信范文
2013/11/30 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
高中学校对照检查材料
2014/08/31 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2014年工商所工作总结
2014/12/09 职场文书
班主任经验交流材料
2014/12/16 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python