CSDN Reading mode togger

用于csdn博客阅读时内容区域扩大

As of 2021-04-14. See the latest version.

  1. // ==UserScript==
  2. // @name CSDN Reading mode togger
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description 用于csdn博客阅读时内容区域扩大
  6. // @author 宏斌
  7. // @match https://blog.csdn.net/*
  8. // @grant none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12. 'use strict';
  13. const okBtn = document.createElement('button');
  14. okBtn.id = 'ReadingMode';
  15. okBtn.setAttribute('class','option-box');
  16. okBtn.innerText = 'R'
  17. // $(".blog-content-box").append(okBtn);
  18. $('.csdn-side-toolbar').append(okBtn);
  19. $("#ReadingMode").css({ width: '44px',height:'44px','border-radius':'22px','background-color':'#fff','font-size':'25px','color':'#ccc','box-shadow': '0 2px 4px 0 rgb(0 0 0 / 5%)','margin-top':'8px' });
  20. const mystyles = document.createElement('style');
  21. mystyles.type = 'text/css';
  22. $("head").append(mystyles);
  23. $("#mainBox").css("transition","width 0.3s linear");
  24. $("#rightAside").css("transition","width 0.3s linear");
  25. mystyles.innerHTML = `.fillWidth{width: 100% !important} .zeroWidth{width: 0 !important}`;
  26. $("#ReadingMode").on('click',() => {
  27. $("#mainBox").toggleClass('fillWidth');
  28. $('main').toggleClass('fillWidth');
  29. $("#rightAside").toggleClass("zeroWidth");
  30.  
  31.  
  32.  
  33. })
  34. })();