我正在尝试添加 <div>
使用 JavaScript,然后更改其 width/height/top/left 属性。但是当我使用 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">
对于文档类型,它不再接受顶部/左侧/宽度/高度值。但是,如果我用单位(即 px)设置宽度/高度/顶部/左侧值,那么它就可以正常工作。
myDiv.style.top="200px";
myDiv.style.left="200px";
那么,在修改样式时,doctype 对 JavaScript 执行的影响是什么(或者也可能是其他因素)?
最佳答案
使用原始数字在技术上是无效的,即使当您不使用文档类型时浏览器允许您摆脱它(当您不使用文档类型时浏览器会做很多时髦的事情)。
样式属性真的很像 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>';
关于javascript - 使用 DOCTYPE 时使用 JavaScript 设置样式的奇怪问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4031519/