Question

在我在Chrome上创建的这个JSFiddle中，我发现它无法在IE上工作（我正在使用IE9）。任何理由：http://jsfiddle.net/ZSB67/。

var backImage = [
    "http://alm7.wikispaces.com/file/view/RedBackground.bmp/144018347/RedBackground.bmp",
    "http://www.time2man-up.com/wp-content/uploads/2011/07/black-background.jpg",
    "http://1.bp.blogspot.com/--GorNQoEUxg/TfWPyckVeMI/AAAAAAAAAHk/0208KqQf3ds/s1600/yellow_background.jpg",
    ""
    ];

function changeBGImage(whichImage) {
    if (document.body) {
        document.body.style.background = "url(\"" + backImage[whichImage] + "\")";
    }
}
var buttons = document.querySelectorAll('.bg_swap'),
    button;

for (var i = 0; i < buttons.length; i++) {
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(this.dataset.index);
    };
}

Answer 1

IE＆lt; 10不支持elem.dataset。您需要明确获取属性：http://jsfiddle.net/ZSB67/1/。

changeBGImage(this.getAttribute('data-index'));

将来，您可能需要按F12并查看控制台是否有错误，因为它说明了导致此问题的原因。

Answer 2

this.dataset.index无法在IE上运行。尝试使用this.getAttribute("data-index")。

Answer 3

旧版本的IE（实际上除了IE11 +之外的所有版本）都无法识别dataset属性的原因是它是在HTML5中引入的，这些版本不支持或仅部分支持它。

为了获得这个属性的值，可以使用像

这样的纯js

changeBGImage(this.attributes.getNamedItem("data-index").value)

使用getAttribute（）方法

或更简单：

changeBGImage(this.getAttribute("data-index"))

或jQuery（v 1.2.3 +）：

$(".bg_swap").click(function(){
    changeBGImage($(this).data("index"));
})

Answer 4

IE中似乎未定义

dataset。这可能是问题的主要来源。 IE9 64位上其他所有功能都可以正常工作。

您可以在JS中本地存储该状态：

for (var i = 0; i < buttons.length; i++) 
    register( i )

function register( i ){
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(i);
    };
}

或者你可以进行查找

for (var i = 0; i < buttons.length; i++) 
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(this.getAttribute('data-index'));
    };
}

Answer 5

Jquery有一个data()方法，它也适用于我测试的IE版本（IE8和IE10）。

请查看此处的文档：

http://api.jquery.com/data/

使用elem.dataset与IE和JSFiddle的问题

5 个答案: