4

当我尝试在网页上调用以下函数时，出现错误：“TypeError: item.setAttribute is not a function”：

function list() {
    var colors = document.getElementById('colors');
    var colors = colors.childNodes.length;
    for (var i = 1; i < broj; i++) {
        var item = colors.childNodes.item(i);
        item.setAttribute("id", i);
        item.setAttribute("onmouseover", "moveover(src)");
        item.setAttribute("alt", "Color");
        item.hspace = "2";
        item.height = "23";
    }
}

function moveover(colorAddress) {
    var source = colorAddress;
    var image = source.slice(0, source.length - 4);
    var start = "url(";
    var extension = ".jpg)";
    var newImage = start.concat(image, extension);
    document.getElementById('image').style.backgroundImage = newImage;
}

window.onload = function() {
    try {
        list();
    } catch (err) {
        alert(err);
    }
}

该函数是当事件属性添加到函数中的元素时应该触发mouseover()的函数的辅助函数。list()onmouseoverlist()

当我加载我的页面时，会弹出警告框并给我上述错误。

它实际上将所有属性添加到我的元素中，但我不明白为什么会出现这个错误。因为这个错误正在触发它阻止我在这个加载后立即运行另一个函数。

为什么会出现这个错误？

这是我要操作的 HTML 文档：

<div id="image" style="background-image: url(images/nova_brilliant/1.jpg)"></div>
<div id="tekst">
     <h1>Nova Brilliant</h1>

    <div id="contents">
        <p>Hover with your mouse over the desired color to see the kitchen in that color:</p>
        <div id="colors">
            <img src="images/nova_brilliant/1.gif">
            <img src="images/nova_brilliant/2.gif">
            <img src="images/nova_brilliant/3.gif">
        </div>
        <p>Other available colors:</p>
        <div id="others">
            <img src="images/nova_brilliant/4.gif">
            <img src="images/nova_brilliant/5.gif">
            <img src="images/nova_brilliant/6.gif">
        </div>
    </div>
</div>

当用户将鼠标悬停在 div 中的 3 个图像中的一个上时，div 中id="colors"的背景图像id="image"应该发生变化并且它确实发生了变化，只是我得到了那个烦人的错误，它阻止我尽快运行另一个脚本这个加载。

4

1 回答 1

7

您调用的节点很setAttribute()可能是文本节点而不是元素。nodeType最简单的解决方案是在调用之前检查属性setAttribute()：

var item = colors.childNodes[i];
if (item.nodeType == 1) {
    // Do element stuff here
}

顺便说一句：设置事件处理程序属性（例如onmouseovervia setAttribute()）通常是一个坏主意，因为它不像旧 IE 中指定的那样工作（以及更高版本 IE 中的兼容模式）。请改用等效属性：

item.onmouseover = function() {
    moveover(this.src);
};
于 2013-03-28T15:59:08.213 回答