Javascript类名更改不起作用

Question

我有一个小的测试页面设置来测试我有的一个sprite表。sprites.css中的每个sprite如下所示...

.a320_0 {
   top: 0px;
   left: 0px;
   width: 60px;
   height: 64px;
   background: url("images/sprites.png") no-repeat -787px -398px;
}

我的页面是这样的...

null

var i = 0

function imageChange() {
  setTimeout(function() {
    var hdg = i * 15;
    document.getElementById('image').className = "a320_" + hdg;
    i++;
    if (i < 24) {
      imageChange();
    }
  }, 1000)
}
imageChange()

<div id='imageContainer'>
  <div id='image'></div>
</div>

null

在循环过程中，我记录了类名，可以看到它的变化，并且这些名称对应于我的样式表中存在的类。sprites.css和sprites.png都在images文件夹中，并且images文件夹与我的页面位于同一目录中。

如果我只是从我的样式表中复制一个规则并将其直接放到我的页面上，并将名称替换为#image以进行测试，我就可以显示这个特定的图像，这样我的sprite坐标就很好了，但是如果我在实际的css文件上做同样的事情，我就不会得到同样的结果，这导致我认为我的样式表可能没有加载。即使我只是将样式直接放入我的文档中，并尝试使用.classname=，它仍然不起作用。我最近有这个工作，但它似乎不再工作了。我有点迷路了...

Answer 1

它应该是document.getElementById（“image”）.classlist.add（“a320_”+hdg)；。

null

var i = 0;

function imageChange() {
  setTimeout(function() {
    var hdg = i * 15;
    document.getElementById("image").classList.add("a320_" + hdg);
    i++;
    if (i < 24) {
      imageChange();
    }
  }, 1000);
}

imageChange();

.a320_0 {
  top: 0px;
  left: 0px;
  width: 60px;
  height: 64px;
  background: url("https://source.unsplash.com/random") no-repeat -787px -398px;
}

<div id='imageContainer'>
  <div id='image'></div>
</div>