js文章太长显示部分（百分比），点击按钮显示全部

功能介绍：文章内容太长，进入页面只显示部分内容，并且提示“展开剩余 76% ↓”，点击按钮显示全部内容！

js代码如下：

document.addEventListener("DOMContentLoaded", function() {
  const fullContent = document.getElementById('content').innerHTML
  if(fullContent.length > 800){
    const partialContent = fullContent.substring(0, 600);
    const percent = (100 -  (600 / fullContent.length) * 100).toFixed(0)
    document.getElementById('content').innerHTML = `${partialContent}<div class="read-box"><div class="read_mask"></div><div class="read_mod"><span class="read-button" id="showFullContent">展开剩余 ` + percent + `% ↓</span></div></div>`;  
    document.getElementById('showFullContent').addEventListener('click', function() {  
      document.getElementById('content').innerHTML = `${fullContent}`;  
      this.style.display = 'none';  
    });
  }
});

css代码如下：

.read-box {
    position: relative;
    z-index: 9;
    margin-top: -220px;
    padding: 0 0 35px;
    width: 101%;
    text-align: center;
}
.read_mask {
    height: 200px;
    background: -webkit-gradient(linear,0 top,0 bottom,from(rgba(255,255,255,0)),to(#fff));
    background: -o-linear-gradient(bottom,rgba(255,255,255,.1),rgba(255,255,255,0));
}
.read-box .read_mod {
    background-color: #fff;
}
.read-button {
    display: inline-block;
    width: 230px;
    height: 45px;
    border: 1px solid #6b0;
    color: #6b0;
    vertical-align: top;
    font-size: 14px;
    line-height: 45px;
    cursor: pointer;
}
.read-button:hover{
    background: #6b0;
    border: 1px solid  #6b0;
    color: #fff;
}

JS获取当前电脑浏览器基本信息

JS代码格式化后无法运行一般有哪些问题导致的？

事件绑定addEventListener和事件解除绑定removeEventListener的基本用法

如何利用js检测用户滚动页面的位置

js如何设置事件监听

标签： addEventListener, js代码

上面是“js文章太长显示部分（百分比），点击按钮显示全部”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_14280.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！