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模拟地球旋转效果代码实例
Dec 02 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
js图片跟随鼠标移动代码
Nov 26 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
Angular 数据请求的实现方法
May 07 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
基于angular实现树形二级表格
Oct 16 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获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
jquery 使用简明教程
2014/03/05 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JS中的phototype详解
2017/02/04 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
Vue使用axios出现options请求方法
2019/05/30 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
什么是python的列表推导式
2020/05/26 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
加拿大留学自荐信
2014/01/28 职场文书
打架检讨书500字
2014/01/29 职场文书
cf战队收人口号
2014/06/21 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android