javascript - !doctype html 毁了我的脚本

标签 javascript html css

所以我有以下代码必须返回给定对象的屏幕坐标:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body style="margin:0px;padding:0px;">

<div id="help" style="top:100px;right:100px;height:200px;width:200px;position:fixed;border:1px solid #000"></div>
<div id="what">what</div>
<div style="position:relative;margin-top:10000px;"></div>
<script>

function getoffset(element) {
    var xPosition = 0;
    var yPosition = 0;

    while(element) {
        yPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        xPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return [xPosition, yPosition];
}

function cl(){
    var help = document.getElementById('help');
    var what = document.getElementById('what');
    var where = getoffset(what);
    help.innerHTML= where;

}
setInterval(function (){cl()},100);
</script>
</body>

它在 IE、chrome、opera 和 ff 上运行良好,直到我添加 <!DOCTYPE HTML>指令(强制 IE 尊重 div 定位)。
当我这样做时,这段代码始终返回相同的值(只有 Chrome 做得很好)。我做错了什么??

最佳答案

您正在使用一些 HTML 或 javascript,这取决于 quirks mode 中的浏览器功能(IE9+ 还具有“IE8 标准模式”)。添加有效的现代文档类型使浏览器处于标准/严格模式。

问题可能是您对 scrollLeft/scrollRightscrollTop/clientTop 的使用。他们behave differently in older browsers .

关于javascript - !doctype html 毁了我的脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21363090/

相关文章:

javascript - 我的代码容易受到 XSS 攻击吗?

javascript - 如何访问属性 :value pairs in this JSON

javascript - 如何淡入淡出更改文本

css - 使用响应式设计的带有内容的背景图像

javascript - HTML 表单不传递从 jQuery 动态添加的输入

javascript - 是否可以在 for 循环中有条件的第三个表达式?

javascript - 在 Rails 应用程序中对 Javascript 繁重的 UI 进行集成测试的最佳方法是什么?

javascript - 什么是 "div tag"? (请举例说明)

javascript - 在滚动时创建一个粘性标题,位置固定会破坏标题

jquery - Bootstrap-Select Accordion 的 z-index 问题