Question

我正试图在javascript中为它制作一个“频闪灯”，我发现一些代码可以在互联网上为我做这个...但他们使用了bgcolor，我觉得我应该是正确的但是代码只有在我离开它时才有效...所以你知道我的意思是原来的：

<html><head>
<title>Strobe</title>

<script>

function toggleBgColor()
{
  document.bgColor = document.bgColor == '#ffffff' ? '#000000' : '#ffffff';

  setTimeout('toggleBgColor()', 70); //in milliseconds
}
</script>
</head>

<body onLoad='toggleBgColor();'>
</body></html>

以下是我的更改：

<html><head>
<title>Strobe</title>

<script>

function toggleBgColor()
{
  document.body.style.background-color = document.body.style.background-color == '#ffffff' ? '#000000' : '#ffffff';

  setTimeout('toggleBgColor()', 70); //in milliseconds
}
</script>
</head>

<body onLoad='toggleBgColor();'>
</body></html>

我也尝试将document.body.style.background-color更改为document.body.style.background和document.body.style.backgroundColor ...它们都不起作用......我做错了什么？

Answer 1

document.body.style.background-color是无效的标识符（从技术上讲，它是有效的标识符[document.body.style.background]，后跟运算符[-]，后跟另一个有效的标识符[{ {1}}]，但你知道我的意思）。请改用color。如果其他事情都是正确的，工作。 Live example

你说过你已经尝试过了。我怀疑问题是你的代码在其他地方失败了。例如，您要与document.body.style.backgroundColor进行比较：

'#ffffff'

浏览器可能（可能不会）以您用于指定颜色的相同格式向您报告。在某些浏览器中，该值将返回document.body.style.backgroundColor = document.body.style.backgroundColor == '#ffffff' ? '#000000' : '#ffffff'; // ^^^^^^^^^^^^，而在其他浏览器中则返回"white"等。因此，即使背景颜色为白色，比较也会经常失败。您必须处理这种复杂性，解析rgb(255, 255, 255)并对颜色名称进行查找等。 - 或者维护一个标志，如上例所示。

偏离主题：避免将字符串传递给rgb;相反，直接使用函数引用。在你的情况下：

setTimeout

注意没有引号，也没有setTimeout(toggleBgColor, 70); //in milliseconds（因为它们会调用函数;我们想要传入它的引用，而不是它的返回值）。

如果传递参数（你不在那里，但只是为了完整性），你可以使用一个函数来做到这一点：

()

Answer 2

不确定确切的推理，但是当通过JavaScript引用时，css样式永远不会包含它们。

如果您签出W3参考页面，您会注意到它们在“定义和使用”部分提供了该属性的JavaScript语法:) http://www.w3schools.com/cssref/pr_background-color.asp

您的下一个问题可能是许多浏览器（至少Chrome）不会在内部将背景颜色存储为十六进制值，而是使用RGB。

因此，您的代码比较最终会将“rgb（0,0,0）”与“＃000000”进行比较，从而永远不会返回true。快速修复我的问题只是在代码中使用RGB值。

在我的脑海中，我想你的代码的固定版本应该是这样的：

function toggleBgColor()
{
    document.body.style.backgroundColor = document.body.style.backgroundColor == "rgb(255, 255, 255)" ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";
    setTimeout('toggleBgColor()', 70);
}

无论如何，希望有所帮助：）

bgcolor vs background-color vs backgroundColor

2 个答案: