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

标签 javascript html css doctype

我正在尝试添加 <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 (或 autoinherit)。 (这些链接指向 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/

相关文章:

javascript - 即使禁用,Tablesorter 在编辑行项目时也会更改行位置

html - 有关如何修复表格列宽和文本换行的问题

css - 非 webkit 浏览器忽略具有 webkit 特定功能的 @media 查询

php - 由未点击的链接触发的事件

JavaScript:如何将具有嵌套属性的对象数组分组?

html - PyQt4项目-YouTube播放器未触发onStateChange事件或如何强制HTML5?

Jquery刷新页面并加载表格

html - 具有不同高度的顺序水平而不是垂直的砌体 flex 盒

iFrame/Javascript 鼠标加速中的 Javascript iPhone 滚动效果

javascript - 在 JavaScript 中使用 DOM 动态获取元素中的值