如何实现网站灰度切换按钮？点击可切换全站背景灰度与原色

你的代码存在几个关键问题，导致功能无法正常工作：

• 函数语法错误：不能在函数内部用else重新定义同名函数，这不符合JavaScript语法规范
• 函数绑定不匹配：按钮绑定的是grayscale()，但你定义的函数是myFunction
• 目标元素错误：你要实现整个网站的灰度切换，应该操作body元素，而非不存在的myImg元素

以下是修正后的完整代码，直接可用：

<button onclick="toggleGrayscale()">灰度切换</button>

<style>
body {
    /* 初始状态为正常色彩 */
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    transition: filter 0.3s ease; /* 可选：添加切换动画，让过渡更平滑 */
}
</style>

<script>
// 用变量记录当前灰度状态，初始为关闭
let isGrayscale = false;

function toggleGrayscale() {
    const body = document.body;
    if (isGrayscale) {
        // 恢复正常色彩
        body.style.filter = "grayscale(0)";
        body.style.webkitFilter = "grayscale(0)";
    } else {
        // 切换为灰度模式
        body.style.filter = "grayscale(100%)";
        body.style.webkitFilter = "grayscale(100%)";
    }
    // 切换状态标记
    isGrayscale = !isGrayscale;
}
</script>

代码说明： #

• 用isGrayscale变量追踪当前模式，避免每次点击都读取DOM状态，逻辑更清晰高效
• 同时设置filter和webkitFilter，保证兼容webkit内核的浏览器（比如Chrome、Safari）
• 可选的transition样式让灰度切换有平滑过渡效果，不需要可以直接删除这一行
• 按钮绑定的函数名和定义的函数名保持一致，确保点击能触发正确逻辑

内容的提问来源于stack exchange，提问作者Umk