用突变处理器更改IMG URL

发布于 2025-02-03 02:01:30 字数 1249 浏览 4 评论 0原文

我为演示网站制作了一个深色模式切换按钮，该按钮添加了一个可以更改背景颜色的类。该按钮有效，但我想根据是否存在按钮来交换按钮使用的图像。它不起作用。我认为我已经搞砸了mutationObserver以某种方式，有人可以帮忙吗？

JavaScript

let buttonIMG = document.getElementById("darkButtonIMG");
const observer = new MutationObserver(darkImage);
observer.observe(buttonIMG, {
    attributes: true
});

function darkImage() {
    let buttonIMG = document.getElementById("darkButtonIMG");
    let buttonSRC = buttonIMG.hasAttribute("dark");

    if (buttonSRC === true) {
        buttonIMG.setAttribute("src", "images/Sun_Icon.png");
    } else {
        buttonIMG.setAttribute("src", "images/Moon_Icon.png");
    }
}

HTML

            <nav>
                <div class="row">
                    <button class="buttonHide" id="hamburgerBtn">&#9776;</button>
                        <ul id="navOpen">
                        ...
                        <li><button id="darkButton" type="button" class=""><img id="darkButtonIMG"src="images\Moon_Icon.png" alt="Dark mode icon"></button></li>
                        </ul>
                </div> <!-- End of Navbar Row -->
            </nav>

原文

I've made a dark mode toggle button for my demo website that adds a class to change the background color. The button works, but I want to swap out the image the button is using depending on if the class is present. It's not working. I think I've messed up MutationObserver somehow, can anyone help?

Javascript

let buttonIMG = document.getElementById("darkButtonIMG");
const observer = new MutationObserver(darkImage);
observer.observe(buttonIMG, {
    attributes: true
});

function darkImage() {
    let buttonIMG = document.getElementById("darkButtonIMG");
    let buttonSRC = buttonIMG.hasAttribute("dark");

    if (buttonSRC === true) {
        buttonIMG.setAttribute("src", "images/Sun_Icon.png");
    } else {
        buttonIMG.setAttribute("src", "images/Moon_Icon.png");
    }
}

HTML

            <nav>
                <div class="row">
                    <button class="buttonHide" id="hamburgerBtn">☰</button>
                        <ul id="navOpen">
                        ...
                        <li><button id="darkButton" type="button" class=""><img id="darkButtonIMG"src="images\Moon_Icon.png" alt="Dark mode icon"></button></li>
                        </ul>
                </div> <!-- End of Navbar Row -->
            </nav>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

魔法唧唧 2025-02-10 02:01:30

我想交换按钮使用的图像，具体取决于是否
存在类。

我假设当您单击按钮时，您将添加类黑的类。

在您的回调方法中，您正在检查是否存在深色属性，但是您应该检查一堂课的存在。

let buttonSRC = buttonIMG.classList.contains("dark");

I want to swap out the image the button is using depending on if the
class is present.

I'm assuming that when you click the button you're adding class dark to it.

In your callback method you're checking for the presence of dark attribute, but you should check for the presence of a class instead.

let buttonSRC = buttonIMG.classList.contains("dark");

回复收藏 0 原文

ヅ她的身影、若隐若现 2025-02-10 02:01:30

您需要setAttribute检查HASATTRIBUTE

let buttonIMG = document.getElementById("darkButtonIMG");
const observer = new MutationObserver(darkImage);
observer.observe(buttonIMG, {
    attributes: true
});

function darkImage() {
    let buttonIMG = document.getElementById("darkButtonIMG");
    let buttonSRC = buttonIMG.hasAttribute("dark");

    if (buttonSRC === true) {
        buttonIMG.setAttribute("src", "images/Sun_Icon.png");
        buttonIMG.removeAttribute("dark");
    } else {
        buttonIMG.setAttribute("src", "images/Moon_Icon.png");
        buttonIMG.setAttribute("dark", "dark");
    }
}

You need to setAttribute for check hasAttribute

let buttonIMG = document.getElementById("darkButtonIMG");
const observer = new MutationObserver(darkImage);
observer.observe(buttonIMG, {
    attributes: true
});

function darkImage() {
    let buttonIMG = document.getElementById("darkButtonIMG");
    let buttonSRC = buttonIMG.hasAttribute("dark");

    if (buttonSRC === true) {
        buttonIMG.setAttribute("src", "images/Sun_Icon.png");
        buttonIMG.removeAttribute("dark");
    } else {
        buttonIMG.setAttribute("src", "images/Moon_Icon.png");
        buttonIMG.setAttribute("dark", "dark");
    }
}

回复收藏 0 原文

~没有更多了~