您的位置：首页 > Web前端 > JavaScript

js横向显示全部文字，再点击显示缩略文字

2017-03-24 10:41 309 查看

<body>

<div id="box">

<h2>因为爱情</h2>

<p>给你一张过去的CD听听那时我们的爱情,有时会突然忘了,我还在爱着你　</p>

<p>F:因为爱情不会轻易悲伤E:所以一切都是幸福的模样F:因为爱情简单的生长E:依然随时可以为你疯狂 F:因为爱情怎么会有沧桑</p>

</div>

<script>

function show(){

var pp = document.getElementsByTagName("p");

for (var i = 0; i < pp.length; i++) {

var text = pp[i].innerHTML;

//alert(text);

var newBox = document.createElement("div");

var newBox2 = document.createElement("div");

var btn = document.createElement("a");

newBox.innerHTML = text.substring(0,10);

newBox2.innerHTML = text;

newBox2.style.display="none";

btn.innerHTML = text.length > 10 ? "...显示全部" : "";

btn.href = "###";

btn.onclick = function(e){

if (e.target.innerHTML == "...显示全部"){

e.target.innerHTML = "收起";

e.target.previousSibling.previousSibling.innerHTML = e.target.previousSibling.innerHTML;

}else{

e.target.innerHTML = "...显示全部";

e.target.previousSibling.previousSibling.innerHTML = e.target.previousSibling.innerHTML.substring(0,10);

}

}

pp[i].innerHTML = "";

pp[i].appendChild(newBox);

pp[i].appendChild(newBox2);

pp[i].appendChild(btn);

}

}

show();

</script>

</body>

原文：http://bbs.csdn.net/topics/390825999

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航