我正在尝试添加< div>使用JavaScript,然后更改其width / height / top / left属性.但是,当我使用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)设置width / height / top / left值,那么它可以正常工作.
myDiv.style.top="200px";
myDiv.style.left="200px";
那么,在修改样式时(或者也可能是其他事情)文档类型对JavaScript执行有什么影响？
解决方法:
即使在不使用doctype的情况下浏览器允许您使用原始数字,从技术上讲也是无效的(当您不使用doctype时浏览器会做很多时髦的事情).
样式属性确实类似于CSS属性,即带有单位的字符串.因此,“ 200px”是正确的,200是不正确的.属性(例如left)可以是lengths(例如“ 200px”或“ 10em”),也可以是percentages(或自动或继承). (这些链接均指向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>';