Question

我正在学习用Javascript编程。我在这里创建了一个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。但是，在回调中，您直接访问节点。解决这个问题的两种方法是：

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

(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 reference）

最后，关于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 个答案: