csdn文章全屏阅读

csdn文章全屏阅读，开关在侧边工具栏中
目前為 2024-11-08 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         csdn文章全屏阅读
// @namespace
// @include      *://blog.csdn.net/*/article/details/*
// @version      0.2.0
// @description  csdn文章全屏阅读，开关在侧边工具栏中
// @author       ymzhao
// @namespace 
// @license      MIT
// @grant        GM_addStyle
// ==/UserScript==
GM_addStyle(`
    .blog-content-box.fullscreen {
        overflow: auto;
        padding: 20px max(20px, calc(50% - 600px));
    }
    .blog-content-box {overflow:auto}
`)
;
(function() {
	'use strict'
 
    window.onload = function() {
        const articleDOM = document.querySelector('.blog-content-box')
 
        const csdnSideToolbar = document.querySelector('.csdn-side-toolbar')
        const fsDOM = document.createElement('a')
        fsDOM.id = 'go-fullscreen'
        fsDOM.className = 'option-box'
        // fsDOM.innerHTML = `<span class="show-txt" style="display:flex;opacity:100;">全屏</span>`
        fsDOM.innerText = '全屏'
        const lastDOM = document.querySelector('.csdn-side-toolbar .option-box[data-type="gotop"]')
        csdnSideToolbar.insertBefore(fsDOM,lastDOM)
        
        document.getElementById('go-fullscreen').addEventListener('click', function(){
            goToFullScreen(articleDOM)
        })
        articleDOM.addEventListener('fullscreenchange', function() {
            const isArticleFullscreen = document.fullscreenElement === this
            if(!isArticleFullscreen) {
                if(this.classList.contains('fullscreen')) this.classList.remove('fullscreen')
            } else {
                if(!this.classList.contains('fullscreen')) this.classList.add('fullscreen')
            }
        })
    }
 
    function goToFullScreen(element) {
        element = element || document.body
        if (element.requestFullscreen) element.requestFullscreen()
        else if (element.mozRequestFullScreen) element.mozRequestFullScreen()
        else if (element.msRequestFullscreen) element.msRequestFullscreen()
        else if (element.webkitRequestFullscreen) element.webkitRequestFullscreen()
    }
})();
欢迎访问Greasy Fork镜像
