javascript - element.offsetHeight 影响和 doctype 的行为
问题描述
鉴于以下代码:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test</title> <script type="text/javascript" src="script.js"></script> </head> <body onload="init()"> <div id="test" style="height:200px;border:2px solid black">A box</div> <button id="test-button">Reduce</button> </body> </html>
Javascript:
// script.js function reduce() { var div = document.getElementById("test"); console.log(div.offsetHeight); div.style.height="<VALUE>"; // test value console.log(div.offsetHeight); } function init() { document.getElementById("test-button").onclick = reduce; }
我意识到以下行为:
- 如果
<VALUE>
给出了一个明确的单元(用 测试px
),一切正常(offsetHeight
将被更新并且元素将被修改) - 如果给出没有单位(
100
例如):- 没有文档类型,它会工作(同上)
- 使用给定的文档类型(用 测试
<!DOCTYPE html>
),它将不起作用(浏览器控制台中没有更新或错误日志)
使用 Firefox 69.0 测试。是否有一些文档解释了这种行为?我知道没有文档类型意味着“怪癖模式”,但我正在寻找更准确的来源。
解决方案
推荐阅读
- python - 从验证码中删除曲线/线条(不阻止 ocr)
- c# - 检查器中可见的 Unity 公共字段相互重叠
- java - 如何模拟正在测试的类中存在的方法
- c# - 从数组中检查目录的名称
- python - 如何通过将 pandas Dataframe Columns 与 Set 进行比较来制作新列表
- node.js - 非管理员更改 jupyterhub 中的 nodejs 路径
- java - Port forge gradle 到 gradle 7 没有 Eclipse
- html - 如何以角度验证动态形式
- transactions - TypeOrm 事务与其他服务中的方法
- bash - 从 shell 中的给定数字读取特定数字