html文字折叠隐藏出现问题,javascript实现文字隐藏、展开收起的简单示例

感兴趣javascript实现文字隐藏、展开收起的简单示例的小伙伴，下面一起跟随编程之家 jb51.cc的小编来看看吧。

function init(){

var len = 14; //默认显示字数

var ctn = document.getElementById("content"); //获取div对象

var content = ctn.innerHTML; //获取div里的内容

//alert(content);

var span = document.createElement("span"); //创建元素

var a = document.createElement("a"); //创建元素

span.innerHTML = content.substring(0,len); //span里的内容为content的前len个字符

a.innerHTML = content.length>len?"展开":""; //设置a的显示

a.href = "javascript:void(0)";

a.onclick = function(){

if(a.innerHTML.indexOf("展开")>0){ //如果a中含有"展开"则显示"收起"

a.innerHTML = "收起";

span.innerHTML = content;

}else{

a.innerHTML = "展开";

span.innerHTML = content.substring(0,len);

}

// 设置div内容为空，span元素 a元素加入到div中

ctn.innerHTML = "";

ctn.appendChild(span);

ctn.appendChild(a);

}

那片笑声让我想起我的那些花儿

在我生命每个角落静静为我开着

我曾以为我会永远守在他身旁

今天我们已经离去在人海茫茫

html文字折叠隐藏出现问题,javascript实现文字隐藏、展开收起的简单示例相关推荐

vue中多行文本标签_vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多 ...
【JavaScript】内容的展开/收起
内容的展开/收起样式数据超过两行则用省略号代替,并且显示"展开": 点击"展开",显示全部数据,并且显示"收起": 数据不超过两行则不显 ...
在 Javascript 中将 CSV 显示为表格（简单示例）
欢迎阅读有关如何读取 CSV 文件并将其显示在 Javascript 中的 HTML 表格中的教程.需要在将 CSV 上传到服务器之前将其显示为 HTML 表格?或者服务器上有一个 CSV 文件需要在 ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
html js点击字图片下拉,JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: JavaScript实现文字与图片的拖拽效果 *{padding:0;margin:0;} . ...
javascript在第三个文本框中显示文字_一段中的个别文字，显示在目录中
样例说明通常,目录中显示的文字是应用了标题样式的整段文字,而不是段落中的个别文字但有时,需要让个别文字,或者正文中根本不存在的文字,显示在目录中.要求:目录中只显示段落开头的摘要二字简述设置步 ...
自动改变文字大小和颜色的javascript效果
<body bgcolor="#000000"> <div id="text" style="font-size:20px;&quo ...
如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）...
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
使用Css隐藏超出容器宽度的文字，溢出部分用“...”表示
哎,今天才知道用Css就可以弄出字数太长时"截取"字数的效果,以前还傻乎乎的在后台,或是用js截取.- -! 代码 1 <html> 2 <head> 3 ...

html文字折叠隐藏出现问题,javascript实现文字隐藏、展开收起的简单示例

html文字折叠隐藏出现问题,javascript实现文字隐藏、展开收起的简单示例相关推荐

最新文章

热门文章