IE与我的javascript后台更改代码配合得更好.为什么?

IE acts wierd with my javascript background changing code. Why?

本文关键字：更好 为什么 代码 我的 javascript 后台 IE      更新时间：2024-02-29

目前，我正在制作一个网站作为我的个人项目。我已经测试了我的javascript，它在chrome和firefox上都运行良好。但当我在IE中测试它时，只有部分代码有效。奇怪的是，当我按下f12并打开开发工具时，代码运行得很完美！工作如常，没有任何错误。

这是我的javascript：

var state_Clicked = false;
var List = document.createElement("div");
function gearClick() {
    if(state_Clicked == true) {
        List.parentNode.removeChild(List);
        state_Clicked = false;
    } else {
        List.setAttribute("id", "containBox");
        List.setAttribute("class", "bgChooserBox");
        List.innerHTML = '<span class="thumback"><img onMouseDown="changeBackground(''RD1_SlurpyNom.jpg'');" class="thumb" src="GRAPHICS/bg/RD1_SlurpyNom.jpg" width="100" height="100" /></span> '
                          <span class="thumback"><img onMouseDown="changeBackground(''FS1_SlurpyNom.jpg'');" class="thumb" src="GRAPHICS/bg/FS1_SlurpyNom.jpg" width="100" height="100" /></span> '
                          <span class="thumback"><img onMouseDown="changeBackground(''AJ1_SlurpyNom.png'');" class="thumb" src="GRAPHICS/bg/AJ1_SlurpyNom.png" width="100" height="100" /></span> '
                          <span class="thumback"><img onMouseDown="changeBackground(''PP1_SlurpyNom.png'');" class="thumb" src="GRAPHICS/bg/PP1_SlurpyNom.png" width="100" height="100" /></span> '
                          <span class="thumback"><img onMouseDown="changeBackground(''R1_SlurpyNom.jpg'');" class="thumb" src="GRAPHICS/bg/R1_SlurpyNom.jpg" width="100" height="100" /></span> '
                          <span class="thumback"><img onMouseDown="changeBackground(''TS1_SlurpyNom.jpg'');" class="thumb" src="GRAPHICS/bg/TS1_SlurpyNom.jpg" width="100" height="100" /></span> ';
        document.getElementsByTagName("body").item(0).appendChild(List);
        state_Clicked = true; 
    }
}
function changeBackground(name) {
    console.log('/GRAPHICS/bg/' + name);
    document.getElementById("body").style.backgroundImage = 'url(/GRAPHICS/bg/' + name + ')';
    document.getElementById("logo").style.opacity = '0.4';
}

如有任何帮助，我们将不胜感激。

console.log是最有可能导致问题的原因。控制台不是DOM中的实际对象，它通常由firebug、chrome开发工具、IE开发工具等工具添加到DOM中。chrome和Firefox的新版本在未打开时会忽略控制台调用。或者至少我认为情况是这样的，因为现在很多人都在使用控制台进行调试，而且它可以让人们更容易地进行调试。

无论如何，在IE的情况下，当你打开开发工具时，控制台是一个活动对象，因此你的脚本在打开时不会中断，但是当它关闭时，控制台对象不在那里，而且在这种事件中浏览器不会忽略它，因此脚本正在中断。

IE一直是，而且很可能永远是每个网络开发人员的眼中钉。

如果你想用控制台进行调试，我的建议是在逻辑中添加一个if-else，这样你就可以在它打开和关闭的情况下来回切换。

类似if(console.length > 0){console.log('blah');}

删除console.log调用。它需要一个可用的console对象，否则将引发错误。这就是为什么当你打开开发者工具时，它会起作用，它们提供了一个控制台。

相关文章：