logo标签列表

使用 DOCTYPE 时，使用 JavaScript 设置样式出现奇怪问题

javascripthtmlcssdoctype
3

我正在尝试使用JavaScript添加一个<div>，然后更改它的宽度、高度、上边距和左边距属性。但当我使用XHTML 1 Transitional文档类型时，它停止工作。

这是我创建<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 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

使用文档类型声明后，就无法接受top/left/width/height值。但是如果我使用带有单位的宽度/高度/上边距/左边距（例如px），那么它就能正常工作。
myDiv.style.top="200px";
myDiv.style.left="200px";

那么，doctype 对修改样式（或其他内容）时 JavaScript 执行的影响是什么？
2个回答
4

使用原始数字是技术上无效的，即使浏览器在不使用文档类型时让您得逞（当您不使用文档类型时，浏览器会做很多奇怪的事情）。

样式属性确实像CSS属性一样，是带有单位的字符串。因此，“200px”是正确的，而“200”是不正确的。属性（例如left）可以是类似于“200px”或“10em”的长度，也可以是百分比（或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>';
1

使用DOCTYPE告诉浏览器您正在使用特定的标准（在您的情况下，是XHTML 1.0）- 浏览器随后使用精确的呈现模式（而不是没有DOCTYPE时使用的怪异模式）。

这意味着它将更严格地解释您的代码 - 大小应始终具有单位（200px、1.2em等）。仅数字是无意义的，因此当不在怪异模式下时，浏览器将忽略这些值。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接