CSDN Reading mode togger

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

  1. // ==UserScript==
  2. // @name CSDN Reading mode togger
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.2
  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. // $(".more-toolbox").append(okBtn);
  19. $('.left-toolbox').append(okBtn);
  20. $("#ReadingMode").css({ width: '50px',height:'50px','border-radius':'2px','background-color':'#fff','font-size':'25px','color':'#fff'});
  21. $('#ReadingMode').css({"background": 'linear-gradient(145deg, #bcbcbc, #e0e0e0)','box-shadow': '5px 5px 34px #969696, -5px -5px 34px #ffffff'});
  22. const mystyles = document.createElement('style');
  23. mystyles.type = 'text/css';
  24. $("head").append(mystyles);
  25. $("#mainBox").css("transition","width 0.3s linear");
  26. $("#rightAside").css("transition","width 0.3s linear");
  27. mystyles.innerHTML = `.fillWidth{width: 100% !important} .zeroWidth{width: 0 !important}`;
  28. $("#ReadingMode").on('click',() => {
  29. $("#mainBox").toggleClass('fillWidth');
  30. $('main').toggleClass('fillWidth');
  31. $("#rightAside").toggleClass("zeroWidth");
  32.  
  33.  
  34.  
  35. })
  36. })();