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 相关文章推荐
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquerymobile局部渲染的各种刷新方法小结
Mar 05 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
Vue实现剪切板图片压缩功能
Feb 04 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/07/12 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
为超链接加上disabled后的故事
2010/12/10 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
python中global与nonlocal比较
2014/11/21 Python
python类和继承用法实例
2015/07/07 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python自定义线程类简单示例
2018/03/23 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
调解协议书
2014/04/16 职场文书
银行进社区活动总结
2014/07/07 职场文书
作风建设年活动总结
2014/08/27 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书