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 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
JavaScript工具库之Lodash详解
Jun 15 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 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 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
python读取注册表中值的方法
2013/04/08 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
Python中的流程控制详解
2021/02/18 Python
客户代表自我评价范例
2013/09/24 职场文书
工程招投标邀请书
2014/01/30 职场文书
采购部长岗位职责
2014/06/13 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
小学运动会演讲稿
2014/08/25 职场文书
写给医生的感谢信
2015/01/22 职场文书
检讨书模板
2015/01/29 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
消防安全培训工作总结
2015/10/23 职场文书