csdn文章全屏阅读

csdn文章全屏阅读,开关在侧边工具栏中

  1. // ==UserScript==
  2. // @name csdn文章全屏阅读
  3. // @namespace
  4. // @include *://blog.csdn.net/*/article/details/*
  5. // @version 0.2.1
  6. // @description csdn文章全屏阅读,开关在侧边工具栏中
  7. // @author ymzhao
  8. // @namespace
  9. // @license MIT
  10. // @grant GM_addStyle
  11. // ==/UserScript==
  12. GM_addStyle(`
  13. .blog-content-box.fullscreen {
  14. overflow: auto;
  15. padding: 20px max(20px, calc(50% - 600px));
  16. }
  17. .blog-content-box {overflow:auto}
  18. #go-fullscreen {
  19. font-size: 12px;
  20. line-height: 14px;
  21. color: #999aaa;
  22. }
  23. `)
  24. ;
  25. (function() {
  26. 'use strict'
  27.  
  28. window.onload = function() {
  29. const articleDOM = document.querySelector('.blog-content-box')
  30.  
  31. const csdnSideToolbar = document.querySelector('.csdn-side-toolbar')
  32. const fsDOM = document.createElement('a')
  33. fsDOM.id = 'go-fullscreen'
  34. fsDOM.className = 'option-box'
  35. // fsDOM.innerHTML = `<span class="show-txt" style="display:flex;opacity:100;">全屏</span>`
  36. fsDOM.innerText = '全屏'
  37. const lastDOM = document.querySelector('.csdn-side-toolbar .option-box[data-type="gotop"]')
  38. csdnSideToolbar.insertBefore(fsDOM,lastDOM)
  39.  
  40. document.getElementById('go-fullscreen').addEventListener('click', function(){
  41. goToFullScreen(articleDOM)
  42. })
  43. articleDOM.addEventListener('fullscreenchange', function() {
  44. const isArticleFullscreen = document.fullscreenElement === this
  45. if(!isArticleFullscreen) {
  46. if(this.classList.contains('fullscreen')) this.classList.remove('fullscreen')
  47. } else {
  48. if(!this.classList.contains('fullscreen')) this.classList.add('fullscreen')
  49. }
  50. })
  51. }
  52.  
  53. function goToFullScreen(element) {
  54. element = element || document.body
  55. if (element.requestFullscreen) element.requestFullscreen()
  56. else if (element.mozRequestFullScreen) element.mozRequestFullScreen()
  57. else if (element.msRequestFullscreen) element.msRequestFullscreen()
  58. else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen()
  59. }
  60. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址