个人中心
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在一个数组中。但是，在您的回调中，您直接访问了该节点。解决此问题的两种方法是:

更新您的回调以访问 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);
}

这是一个更新的 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
文章推荐： css - Bootstrap CSS 没有被覆盖？
文章推荐： c++ - DXGI EnumOutputs - 无 DXGI_OUTPUT_DESC 和空显示模式数组
文章推荐： java - 使用 Spring RestTemplate 将 JSONP 转换为 JSON
文章推荐： html - #thing1 :hover #thing2 {} not working?
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com