无法使用javascript回调更改主体背景颜色

Question

我正在学习用Java编程。 我在这里创建了一个jsfiddle- http://jsfiddle.net/vvMRX/1/

function turnRed(node,f){
  setTimeout(f,2000,[node]);
}

(function pageLoaded(){
  turnRed(document.body,function(node){
    alert(node);node.style.backgroundColor = '#ff0000';
  });
})();

我试图在函数上使用setTimeout调用来更改主体背景颜色。 我通过document.body作为节点。 在回调中，我更改了node.style.backgroundColor但是它不起作用。 有趣的是，直接使用document.body.style.backgroundColor即可。 如果我放置一个alert(node) ，它将正确地将其标识为html bodyelement 。

我在这里想念什么？

感激之情。

Answer 1

这是您的JS中引发的以下错误：

Uncaught TypeError: Cannot set property 'backgroundColor' of undefined

这是因为在setTimeout ，您正在数组中传递node 。 但是，在回调中，您将直接访问该节点。 解决此问题的两种方法是：

更新您的回调以访问array的node 。

(function pageLoaded(){
    turnRed( document.body, function(node){ 
        alert(node);

        // Updated code below
        node[0].style.backgroundColor = '#ff0000';
    });
})();

另一种方法是更新setTimeout并直接传递节点。

function turnRed(node,f){
    setTimeout(f,2000,node);
}

这是更新的小提琴： http : //jsfiddle.net/vvMRX/3/

您提到使用document.body.style.backgroundColor工作-这很有意义-因为document.body将指向包含内容的element 。 对于大多数页面，这几乎总是<body>元素。 但是，对于frameset文档，这将返回外部框架。 （ w3.org参考）

最后，关于alert -这是怎么回事，对吗？ 您调用alert(node) ，它显示[object HTMLBodyElement] ，这意味着您传递了正确的element ，对吗？ （ 至少，我也是这么想的！ ）

实际发生的是alert正在警报您的阵列的值。

这是一个小提琴，它表明： http : //jsfiddle.net/4Lf3J/

您应该看到三个警报。

在第一个alert ，我将原始警报更新为调用node.constructor 。 Object.prototype.constructor将返回对创建实例的对象的引用（ MDN reference ）。

在这种情况下，我们将看到

function Array() { [native code] }

希望这将加强您传递array的想法。

第二个alert实际上是调用alert(document.body.constructor) ，这是我们最初希望看到的。 在这种情况下，我们看到：

function HTMLBodyElement() { [native code] }

最后，第三个alert显示值1,2,3,4,5 ，这只是具有这些值的简单数组的警报（再次，加强了警报将警报数组值的想法-为什么您认为警报是正确的）。

希望这对您继续学习JavaScript有帮助！

Answer 2

在功能turnRed您正在传递数组中的节点。 尝试这个：

function turnRed(node,f){
    setTimeout(f,2000,node);
}

我尝试了它的小提琴奏效。

Answer 3

在这种情况下，我想您应该直接使用document.bgColor属性

您可以在此处获得更多信息和代码示例：

http://www.javascripter.net/faq/backgrou.htm

http://www.webcodingtech.com/javascript/change-background-color.php

无法使用javascript回调更改主体背景颜色

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-04-16 05:28:01

解决方案2
0 2014-04-16 05:28:41

解决方案3
0 2014-04-16 05:36:14

无法使用javascript回调更改主体背景颜色

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-04-16 05:28:01

解决方案2 0 2014-04-16 05:28:41

解决方案3 0 2014-04-16 05:36:14

解决方案1
1 已采纳 2014-04-16 05:28:01

解决方案2
0 2014-04-16 05:28:41

解决方案3
0 2014-04-16 05:36:14