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 來做同樣的事情。
選一個！