Question

我正在尝试使用JavaScript添加<div>，然后更改其宽度/高度/顶部/左侧属性。但是当我使用XHTML 1 Transitional doctype时，它就会停止工作。

这就是我创建<div>：

的方法

var div=document.createElement("div");
document.body.appendChild(div);
div.innerHTML='<div id="myID" style="z-index:9998;border: 1px solid #000000;
border-radius:3px;position: absolute; display: block;top:-10000;left:-10000; 
width:400; height:400;"></div>';

因此，最初myDiv对用户不可见，因为其左侧和顶部不在屏幕内

然后在某些点击操作中，我正在执行以下操作：

var myDiv=document.getElementById("myID");
myDiv.style.top=200;
myDiv.style.left=200;

如果我没有在HTML中放置doctype，这样可以正常工作。一旦我放了doctype，它就会停止工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

使用doctype，它会停止接受top / left / width / height值。但是如果我用单位（即px）设置宽度/高度/顶部/左侧值，那么它可以正常工作。

myDiv.style.top="200px";
myDiv.style.left="200px";

那么，在修改样式时（或者也可能是其他东西），doctype对JavaScript执行的影响是什么？

Answer 1

使用原始数字在技术上是无效的，即使浏览器允许您在不使用doctype时放弃它（浏览器在您不使用doctype时会做很多时髦的事情）。

样式属性实际上就像CSS属性，带有单位的字符串。所以“200px”是正确的，200是不正确的。属性（例如left）可以是lengths，例如“200px”或“10em”，或percentages（或auto或inherit）。（这些链接符合CSS 2.1规范。）

创建myID div：

时，还需要在字符串中包含单位

div.innerHTML = '<div id="myID" style="z-index:9998; ' +
    'border: 1px solid #000000; ' +
    'border-radius:3px;' +
    'position: absolute;' +
    'display: block;' +
    'top:-10000px;' +     // here
    'left:-10000px;' +    // here
    'width:400px;' +      // here
    'height:400px;"' +    // and here
    '></div>';

Answer 2

使用DOCTYPE告诉浏览器您使用的是特定标准（在您的情况下，XHTML 1.0） - 浏览器然后使用精确的渲染模式（而不是它将使用的quirks mode没有DOCTYPE）。

这意味着它将更严格地解释您的代码 - 大小应始终与它们一起使用（200px，1.2em等...）。只是一个数字是没有意义的，所以浏览器在没有处于怪癖模式时会忽略这些值。

使用DOCTYPE时使用JavaScript设置样式的奇怪问题

2 个答案: