Question

我是HTML，CSS和JavaScript的新手，我偶然发现了一个问题。这段代码应该创建一张随着时间的推移向右移动的图片，但它只有在我删除doctype代码行时才有效。我在验证器中尝试了此代码，它没有显示任何错误，但除非我删除了doctype，否则它不会执行我想要的操作。我应该在这里改变什么？

<!doctype html>
<html>
    <head>
        <title>Timer pomeranje</title>
        <script>
            var the_timer, x_position = 0, the_image;
            function set_timer() {
                the_image = document.getElementById("djuro_image");
                x_position = x_position + 1;
                the_image.style.left=x_position;
                the_timer = setTimeout(set_timer, 50);
            }
        </script>
    </head>
    <body onload = "set_timer()">
        <img src = "Djuro.png" id = "djuro_image" style = "position:absolute; left:0px" alt = "Djuro">
    </body>
</html>

Answer 1

在Quirks模式下（没有DOCTYPE声明），允许没有单位的CSS大小;它们被解释为像素。

在标准模式下（使用DOCTYPE），CSS长度始终需要单位。

因此解决方案是将px添加到位置：the_image.style.left=x_position+'px';
然后它将在标准和Quirks模式下工作。

var the_timer, x_position = 0, the_image;

function set_timer() {
  the_image = document.getElementById("djuro_image");
  x_position = x_position + 1;
  the_image.style.left = x_position + 'px';
  the_timer = setTimeout(set_timer, 50);
}

set_timer();

<img src="Djuro.png" id="djuro_image" style="position:absolute; left:0px" alt="Djuro">

作为旁注，使用Quirks模式绝不是一个好主意。在这种特殊情况下，大多数浏览器共享相同的怪癖（没有单位的CSS大小被视为px）但情况并非总是如此！

Answer 2

你需要提供单位，在你的情况下'px'：

the_image.style.left=x_position + 'px';

这里是plunkr：

http://plnkr.co/edit/vyYUoItrw3S0eJyFa0wb?p=preview

JavaScript无法使用doctype html？

2 个答案: