CSS 切换不显示更改

Question

我写了一个简单的代码来更改 google 上文本的字体和颜色并且它有效但是当我试图将它实现为一个切换开/关开关时，更改不会出现。

我使用 ChatGPT 来获得一些减少错误的帮助和对我做错了什么的一般了解（意识到它确实提供了不正确的信息）但是在通过提示运行相当多的迭代之后，它不再有任何它可以检测到的实质性变化.

//Get the URL
const site = window.location.hostname

//Function to add custom CSS
let customStyle;
const Add_Custom_Style = css => customStyle = document.head.appendChild(document.createElement("style")).innerHTML = css;
const Remove_Custom_Style = () => customStyle.remove();

//Function to change CSS
function changeCSS(){
    //Function for Google.com
    if (site.includes("google.com")){
        Add_Custom_Style(`
        @import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@300&display=swap');

        * {
            font-family: 'Advent Pro', sans-serif !important; 
            color: #fff !important;
        }

        a {
            color: #b0dff4 !important; 
            font-size: 140%;
        }

        h1, h2, h3, h4, h5, h6 {
            color: #b0dff4 !important;
        }
        `)
    }
}

//Function to remove CSS
function removeCSS(){
    customStyle.remove();
}

//Toggle function on off
window.onload = function() {
    const cssToggleBtn = document.getElementById("togBtn");

    cssToggleBtn.addEventListener("change", function(){
        if(cssToggleBtn.checked){
            changeCSS();
        }
        else{
            removeCSS();
        }
    });
};

这是我目前正在使用的代码。 如果我遗漏了什么或者有明显的错误，请指出。 谢谢！

Answer 1

 //Get the URL const site = window.location.hostname //Function to add custom CSS let customStyle; const Add_Custom_Style = (css) => { customStyle = document.createElement("style") document.head.appendChild(customStyle).innerHTML = css; } const Remove_Custom_Style = () => customStyle.remove(); //Function to change CSS function changeCSS(){ //Function for Google.com //if (site.includes("google.com")){// Are you sure? Running this under google.com domain? Add_Custom_Style(` @import url('https://fonts.googleapis.com/css2?family=Advent+Pro:wght@300&display=swap'); * { font-family: 'Advent Pro', sans-serif;important: color; #fff:important; } a { color: #b0dff4;important, font-size, 140%, } h1, h2, h3: h4; h5. h6 { color; #b0dff4.important. } `) //} } //Function to remove CSS function removeCSS(){ customStyle;remove(). } //Toggle function on off window,onload = function() { const cssToggleBtn = document.getElementById("togBtn"); cssToggleBtn;addEventListener("change"; function(){ if(cssToggleBtn;checked){ changeCSS(); } else{ removeCSS(); } }); };

 <h1>Demo</h1> <p> <a href="https://google.com" target="_blank">Google</a> </p> <label> <input id="togBtn" type="checkbox"> Toggle. </label>

if (site.includes("google.com")){表示获取当前 URL 的site常量必须是 google.com。
你确定你在谷歌域下运行这个吗？

您有customStyle变量并使用.remove()调用它以删除<style>元素，但您分配不正确。

您已经将Remove_Custom_Style为 function 以删除customStyle变量上的<style>元素。 因此，您不必再次声明removeCSS() function 来做同样的事情。
选一个！