通过油猴自定义修改网页样式

花生²

已于 2024-04-23 10:50:33 修改

阅读量195

点赞数 2

分类专栏：油猴文章标签： javascript 前端

于 2024-04-19 17:07:55 首次发布

本文链接：https://blog.csdn.net/huafengjie/article/details/137971452

版权

油猴专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍如何使用UserScript来修改知学堂网页样式，如调整导航栏高度、内容区域宽度等，以满足个人使用习惯。

摘要由CSDN通过智能技术生成

自定义修改原有网页样式，使其符合自己的使用习惯。此处以知学堂为例。您可以按照自己的需求进行修改。

// ==UserScript==
// @name         花生样式
// @namespace    http://tampermonkey.net/
// @version      2024-04-19
// @description  自定义修改原有网页样式，使其符合自己的使用习惯。此处以知学堂为例。
// @author       花生
// @match        *://*/*

// @icon         https://www.google.com/s2/favicons?sz=64&domain=zhihu.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    var self_url = location.host;
    if(self_url == 'www.zhihu.com'){
        let path_name = location.pathname.split("/");
        let path_name_str = path_name[0]+path_name[1]+path_name[2]+path_name[3]+path_name[4];
        console.log("path_name_str",path_name_str)
        if(path_name_str == 'xenmarkettrainingtraining-video'){
            setTimeout(function(){
                document.getElementsByClassName("ShelfTopNav-root-eb3BX")[0].style.height="40px";
                document.getElementsByClassName("App-content-4ebEV")[0].style.width="90%";
                document.getElementsByClassName("App-content-4ebEV")[0].style.margin="57px auto 0";
                document.getElementsByClassName("App-main-nxEm4")[0].style.width="auto";
                document.getElementsByClassName("VideoPlayer-content-vydRd")[0].style.width="auto";
                document.getElementsByClassName("VideoPlayer-content-vydRd")[0].style.height="auto";
                document.getElementsByClassName("central")[0].style.display="none";
            },10)
        }

    }
})();