我想更改页面背景颜色，但它在 Chrome 中无法正常工作答案

【问题标题】：I want to change the page background color, but it doesn't work as I expect in Chrome我想更改页面背景颜色，但它在 Chrome 中无法正常工作
【发布时间】：2018-05-24 17:38:04
【问题描述】：

我是一个新的JavaScript学习者，我想改变我的页面的背景颜色，所以我在下面写了一个页面：

function change_color() {
  console.log('6666');
  document.body.style.backgroundColor = "green";
  alert("the color has changed to green!");
  console.log('6666');
  document.body.style.backgroundColor = "blue";
}

&lt;button onclick="change_color()"&gt;change color&lt;/button&gt;

我希望函数应该先将背景颜色改为绿色，然后显示弹出窗口，然后将背景颜色改为蓝色。但是在Chrome中的运行方式不同，在弹出窗口之前页面没有变绿，只是变蓝了，我没有看到变绿的过程。 如果我用 Edge 或 Firefox 打开页面，效果很好，但如果我用 Chrome 67.0.3396.40 或 Chrome 66.0.3359.170 打开页面，在弹出窗口之前页面不会变为绿色 .为什么？

【问题讨论】：

如果你想暂停脚本执行，你不应该依赖警报。事实上，您根本不应该尝试暂停执行。相反，您应该定义由用户输入触发的行为。你可以先试试window.confirm

标签： javascript html css

【解决方案1】：

alert 不需要触发 DOM 重新渲染，在 Chrome 中也不需要（与其他浏览器不同）。要查看中间更改，您可以使用超时在警报前插入延迟。届时将重新渲染 DOM。

function change_color() {
    console.log('6666');
    document.body.style.backgroundColor = "green";
    setTimeout(() => {
        alert("the color has changed to green!");
        console.log('6666');
        document.body.style.backgroundColor = "blue";
    });
}

&lt;button type="button" onclick="change_color()"&gt;change color&lt;/button&gt;

【讨论】：

这不是 OP 要求的答案。
你能告诉我为什么 chrome 不像其他浏览器吗？
@peterzhang 我不知道任何技术原因。 alert 是一个非常古老的 API，规范为不同的实现留出了空间，而不仅仅是弹出窗口的外观。 Chrome 使用Blink 来呈现 HTML，而 Firefox 和 Safari 使用其他引擎，并且只有 HTML 引擎决定如何处理细节。

【解决方案2】：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>666</title>
    <script type="text/javascript" charset="utf-8">
    function change_color() {
     console.log('6666');
     document.body.style.backgroundColor = "green";
     setTimeout(function(){alert("the color has changed to green!"); }, 5);
     console.log('6666');
     setTimeout(function(){document.body.style.backgroundColor = "blue"; }, 5);
}
    </script>
</head>

<body>
    <button type="button" onclick="change_color()">change color</button>
</body>

</html>

这些是 UI 阻塞事件。你可以设置一个 setTimeout 让它工作

function change_color() {
     console.log('6666');
     document.body.style.backgroundColor = "green";
     setTimeout(function(){alert("the color has changed to green!"); }, 5);
     console.log('6666');
     setTimeout(function(){document.body.style.backgroundColor = "blue"; }, 5);
}

【讨论】：

【解决方案3】：

你需要一个 if else ，并使用 css 为你的 body 设置一个默认的背景颜色。

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>666</title>
<script type="text/javascript" charset="utf-8">
function change_color() {
if(document.body.style.backgroundColor == "blue"){
    console.log('6666');
    document.body.style.backgroundColor = "green";
    alert("the color has changed to green!");
} else { 
    console.log('6666');
    document.body.style.backgroundColor = "blue";
}}
</script>
</head>

<body style="background-color:blue;">
<button type="button" onclick="change_color();">change color</button>
</body>

</html>

【讨论】：