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 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
js实现对table的增加行和删除行的操作方法
Oct 13 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
jQuery 插件实现随机自由弹跳气泡样式
Jan 12 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
浅谈Vue.set实际上是什么
Oct 17 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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
小程序实现留言板
2018/11/02 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
python 实现控制鼠标键盘
2020/11/27 Python
python 如何引入协程和原理分析
2020/11/30 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
培训演讲稿范文
2014/01/12 职场文书
会计毕业生自荐书
2014/06/12 职场文书
心理健康教育主题班会
2015/08/13 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技