javascript - 篡改猴 : display an element if it's hidden (and vice versa)

Question

我想根据键盘快捷键在 Youtube 上隐藏/显示一些 div。一旦隐藏了 div，我就可以隐藏它们，但不能显示它们。

// ==UserScript==
// @name         Youtube enhanced
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Youtube enhanced
// @author       You
// @include     *youtube.com/watch*
// for change CSS
// @grant    GM_addStyle

// ==/UserScript==


window.addEventListener("keydown", dispatchkeyboard, false);

function dispatchkeyboard(key) {
    // frontcolor

    if (key.altKey && key.code === "KeyC") { // KeyX
        alert("c")
        var hidden_or_display = document.getElementsByClassName("ytp-gradient-bottom")[0].style.display;
        alert(hidden_or_display)
        if (hidden_or_display == "none") {
            alert('none')
            var display = ".ytp-gradient-bottom,.ytp-gradient-top,.ytp-chrome-top,.ytp-chrome-bottom{display:block;}"
            var tag = document.createElement("style");
            tag.type = "text/css";
            document.getElementsByTagName("head")[0].appendChild(tag);
            tag[(typeof document.body.style.WebkitAppearance == "string") ? "innerText" : "innerHTML"] = display
        } else {
            alert('else')
            var goaway = ".ytp-gradient-bottom,.ytp-gradient-top,.ytp-chrome-top,.ytp-chrome-bottom{display:none;}";
            var tagd = document.createElement("style");
            tagd.type = "text/css";
            document.getElementsByTagName("head")[0].appendChild(tagd);
            tagd[(typeof document.body.style.WebkitAppearance == "string") ? "innerText" : "innerHTML"] = goaway
        }
    }

}

Answer 1

内联样式比样式表中声明的样式具有更高的优先级。通过样式表更改元素的样式不会更改内联样式值。

我还没有安装 tampermonkey，所以未经测试，请更改

  var hidden_or_display = document.getElementsByClassName("ytp-gradient-bottom")[0].style.display;

至

  var element = document.getElementsByClassName("ytp-gradient-bottom")[0];
  var hidden_or_display = element.style.display;

  // toggle inline style
  element.style.display = hidden_or_display == "none" ? "block" : "none";