☰

王者荣耀-官网首页21:9宽屏优化

优化官网21:9宽屏视觉效果

// ==UserScript==
// @name         王者荣耀-官网首页21:9宽屏优化
// @namespace    https://www.52pojie.cn/home.php?mod=space&uid=508077
// @version      1.2
// @description  优化官网21:9宽屏视觉效果
// @author       未知的动力
// @match        https://pvp.qq.com/*
// @run-at      document-end
// ==/UserScript==

(function () {
    'use strict';
    // 获取背景元素
    const imgBg = document.querySelector(".wrapper .kv-bg-container .kv-bg");
    if (imgBg) imgBg.style.backgroundSize = "cover";

    // 获取body元素
    const bodyEle = document.body;
    if (bodyEle) {
        // 移除style属性
        bodyEle.removeAttribute("style");
        // 修改padding属性
        bodyEle.style["padding-top"] = "0px";
    }

    // 移除滚动条
    const styleEle = document.createElement("style");
    styleEle.innerHTML = `
    body::-webkit-scrollbar {
        display:none;
    }    `;
    document.head.appendChild(styleEle);



    // 获取顶部白条 去除
    const topBoxEle = document.querySelector("#ost_box");
    if (topBoxEle) topBoxEle.style.display = "none";


    // 上移导航条 只能在onload事件后处理 否则可能失效
    // 由于二次渲染导致的，我们可以添加元素监听来解决，但是为了使代码更轻量
    // 此处简单使用onload事件进行处理
    window.addEventListener("load", event_moveNaviBar, false);
    // 事件处理函数
    function event_moveNaviBar() {
        // 获取header元素 去除top=42px属性
        const headerEle = document.querySelector(".header");
        if (headerEle) headerEle.style.top = "0px";
    }

    // 获取顶部菜单 下移100像素提升海报视觉效果
    const menuTop = document.querySelector(".main_top");
    if (menuTop) menuTop.style["margin-top"] = "100px";

})();