给文章添加阅读模式纯js_js 阅读模式-优快云博客

本文链接：https://blog.youkuaiyun.com/luo2424348224/article/details/132830589

本文介绍了如何在网页中添加阅读模式功能，通过JavaScript隐藏图片并调整布局，提供更简洁的文本体验。读者可以尝试将这段代码应用到自己的网站上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天给大家分享添加文章的阅读模式，让更好的体验度。

方法：首先建个input

<input type="button" value="阅读模式"  onclick="miniPic()" style="background-color:#275ecf;color:#FFFFFF;width:70px;height:20px;border-radius: 5px;"></span>

然后建立个js

<script>
//无图精简版
function miniPic() {  
    document.getElementsByClassName('article-mp_msg')[0].style.display="none";
document.getElementsByClassName('article-msg')[0].style.padding="20px";
document.getElementsByClassName('article-title')[0].style.textAlign ="center";
document.getElementsByClassName('article-detail_inner')[0].style.margin ="auto";
    bdhtml=window.document.body.innerHTML;  
    sprnstr="<!--startprint-->";   
    eprnstr="<!--endprint-->";   
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);   
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));   
    var re1 = /<img.*?(?:>|\/>)/gi;//匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
prnhtml = prnhtml.replace(re1,'');//执行替换成空字符
    window.document.body.innerHTML=prnhtml;   
} 
</script>

这样就搞定了