JS实现显示部分文字点击显示全部的示例

最新推荐文章于 2022-03-26 23:03:43 发布

爱吃西红柿！

最新推荐文章于 2022-03-26 23:03:43 发布

阅读量1.3k

点赞数 2

原文链接：https://blog.csdn.net/x163326/article/details/103937792

版权



<body>
<div id="box">
   <h2>因为爱情</h2>
   <p>给你一张过去的CD听听那时我们的爱情,有时会突然忘了,我还在爱着你 　</p>
   <p>F:因为爱情 不会轻易悲伤E:所以一切都是幸福的模样F:因为爱情 简单的生长E:依然随时可以为你疯狂 F:因为爱情 怎么会有沧桑</p>
</div>


<script>
   /**
    * @param
    * @author 512笔记 www.512pic.com
    **/
   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>

爱吃西红柿！

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS实现显示部分文字点击显示全部的示例

<body><div id="box"> <h2>因为爱情</h2> <p>给你一张过去的CD听听那时我们的爱情,有时会突然忘了,我还在爱着你　</p> <p>F:因为爱情不会轻易悲伤E:所以一切都是幸福的模样F:因为爱情简单的生长E:依然随时可以为你疯狂 F:因为爱情怎么会有沧桑</p></div><script> /** * @p...
复制链接

扫一扫