gpt4 book ai didi

javascript - 无法使用 javascript 回调更改正文背景颜色

转载 作者:太空宇宙 更新时间:2023-11-04 13:35:02 25 4
gpt4 key购买 nike

我正在学习用 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

我在这里错过了什么?

感谢回复。

最佳答案

这是在您的 JS 中抛出的以下错误:

Uncaught TypeError: Cannot set property 'backgroundColor' of undefined

这是因为在您的 setTimeout 中,你正在传递 node在一个数组中。但是,在您的回调中,您直接访问了该节点。解决此问题的两种方法是:

更新您的回调以访问 nodearray 内.

(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);
}

这是一个更新的 fiddle :http://jsfiddle.net/vvMRX/3/

您提到使用 document.body.style.backgroundColor工作 - 这是有道理的 - 自 document.body将指向 element包含内容。对于大多数页面,这几乎总是 <body>元素。但是,对于 frameset文档,这将返回外框。 ( w3.org reference )

最后,关于 alert - 这是怎么回事,对吧?你打电话alert(node) , 并显示 [object HTMLBodyElement] ,这意味着您传递了正确的 element , 正确的? (至少,我也是这么想的!)

实际发生的是 alert正在提醒您数组的值。

这是一个 fiddle 演示: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 有所帮助!

关于javascript - 无法使用 javascript 回调更改正文背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23100632/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com