堆栈内存溢出
  繁体   English   中英

CSS 切换不显示更改

[英]CSS Toggle not displaying changes

 itsfrxst  2023-01-23 00:19:17  42   1    javascript/ css/ google-chrome-extension/ toggle

提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。

问题描述

我写了一个简单的代码来更改 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();
        }
    });
};

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

1 条回复

1楼
 vee  0  2023-01-24 15:28:59

 //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 来做同样的事情。
选一个！

问题未解决？试试本站强大的搜索功能，搜索： CSS 切换不显示更改。
切换更改CSS选择器

[英]Toggle changes css selectors

我正在尝试不更改按钮单击时段落的id属性。 第一部分工作。 但是当再次单击该按钮时，应还原为原始样式。 JavaScript的新功能，因此任何其他有用的文章都很棒。 这是CSS： JS HTML ...

如何在CSS更改之间切换

[英]How to toggle between CSS changes

我有一个按钮，当按下该按钮时会使用“ Display：None;”隐藏一个div。 如何在jquery中编写代码，使CSS属性在Display：None和Display：Block之间切换？ 当您再次单击它时 等等等等。 谢谢！ 编辑： 我的CSS看起来像这样 ...

切换许多动画和CSS更改

[英]Toggle Many Animations and CSS Changes

所以我有下面的代码，我试图之间切换。 我以为我可以添加/删除类，它可以工作，但似乎不行。 我尝试过切换，但是那也不起作用。 有没有一种简单的方法可以使第二次单击的所有内容恢复原状？ 和HTML ...

Amcharts切换不显示

[英]Amcharts toggle not displaying

我正在使用这个沙漏.. 当我为两个图表应用切换功能时，它在那里什么都没有显示。我认为如果在哪里可以使用无效尺寸方法，将使用某种无效尺寸方法？ 我想实现的另一件事是，当单击chart1的每个条时，单独的值将放置在chart2和chart 3中。 。 这是我在stackove ...

切换时未显示消息

[英]Message not displaying on toggle

我试图在我的代码中显示错误消息，但它不起作用，我尝试使用style.display和 .visbility。 两者都给我这个错误 index.js:16 Uncaught TypeError: Assignment to constant variable。 在 HTMLButtonElement. ...

切换DOM的按钮

[英]Toggle button that changes DOM

我正在尝试创建一个按钮，单击该按钮可以更改其上方的文本。 但是，我也想将其放置在再次按下该按钮的位置，它将变回原来的位置。 这是到目前为止的代码，但是该按钮没有执行任何操作。 &lt;!doctype.html&gt; &lt;html&gt; &lt;head&gt; &l ...

切换不适用于显示替代消息

[英]Toggle not working for displaying alternate message

我想在按钮单击事件上切换消息“是”和“否”，但是当前不适用于以下代码： 的HTML JS custom.js ...

在jQuery中切换CSS属性？

[英]Toggle css property in jquery?

我有一个菜单，可在单击nav-toggle类时滑出。 现在，我还希望nav-toggle类（菜单图标）从右侧沿226px移动，因此它与#navigation菜单同时移动。 然后，如果再次单击它，将折叠菜单（如当前所做的那样），并返回到right:0位置。 在最后第三行中看到我的评论 ...

CSS拨动开关状态

[英]css toggle switch status

因此，这是我要使用的拨动开关的功能，我正在使用https://metroui.org.ua/inputs.html ，我要尝试做的是更改开关/复选框之前的标签，表示已选中或未选中。 如果单击标签，它将更改开关，但文本不会更改。 JavaScript的： $(document) ...

使用AngularJS添加/切换CSS

[英]Add/Toggle CSS with AngularJS

所以基本上我的页面上有一个控件，当单击该控件时，需要使用两个不同的CSS类切换两个不同的元素。 我设法使其切换其中一个控件，但不能同时切换两个控件。 这是我的元素： 这是需要触发两个控件的元素。 第一个元素（正在运行）： 这是第二个元素（我需要添加）： 对 ...

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 切换更改CSS选择器 如何在CSS更改之间切换 切换许多动画和CSS更改 Amcharts切换不显示 切换时未显示消息 切换DOM的按钮 切换不适用于显示替代消息 在jQuery中切换CSS属性？ CSS拨动开关状态 使用AngularJS添加/切换CSS
相关标签
 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM