js获取元素相对于父级元素的高度

最新推荐文章于 2025-06-16 18:41:56 发布

lx_1024

最新推荐文章于 2025-06-16 18:41:56 发布

阅读量3w

点赞数 4

分类专栏： js 文章标签： js

js 专栏收录该内容

6 篇文章

订阅专栏

在查找元素相对父元素位置时找到的资料，记录一下

第一篇：

js获取元素相对于父级元素的高度

1. offsetLeft 、offsetTop

用于获取子元素相对于父元素的位移（左位移、上位移）

console.log(oNode.offsetLeft);

2. offsetWidth、offsetHeight

用于获取元素的可见宽度和可见高度

console.log(oNode.offsetWidth);

3. clientX 、clientY

用于获取鼠标坐标（相对于页面的坐标）

var event = event || window.event;

console.log(event.clientX);

offsetLeft与style.left的区别

1. style.left返回的是字符串 //30px

offsetLeft返回的是数值 //30

2. style.left可读可写

offsetLeft只读

3. style.left的值需事先定义，否则取到的值为空

offsetLeft不需提前定义，直接获取

原文链接：http://blog.youkuaiyun.com/xiaobing_hope/article/details/51115641

第二篇

在jquery中可以使用下面的方法

　　获取浏览器显示区域的高度 ： $(window).height(); 
　　获取浏览器显示区域的宽度 ：$(window).width(); 
　　获取页面的文档高度 ：$(document).height();
　　获取页面的文档宽度 ：$(document).width();
　　获取滚动条到顶部的垂直高度 ：$(document).scrollTop();
　　获取滚动条到左边的垂直宽度 ：$(document).scrollLeft();

　　使用javascript也是可以得到这些信息的
　　网页可见区域宽： document.body.clientWidth
　　网页可见区域高： document.body.clientHeight
　　网页可见区域宽： document.body.offsetWidth (包括边线的宽)
　　网页可见区域高： document.body.offsetHeight (包括边线的高)
　　网页正文全文宽： document.body.scrollWidth
　　网页正文全文高： document.body.scrollHeight
　　网页被卷去的高： document.body.scrollTop
　　网页被卷去的左： document.body.scrollLeft
　　网页正文部分上： window.screenTop
　　网页正文部分左： window.screenLeft
　　屏幕分辨率的高： window.screen.height
　　屏幕分辨率的宽： window.screen.width
　　屏幕可用工作区高度： window.screen.availHeight
　　屏幕可用工作区宽度： window.screen.availWidth

第三篇：

各浏览器鼠标位置测试

废话不多说，下面分别检测各个浏览器下

e.pageX , e.layerX , e.offsetX , e.clientX , e.x

测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="http://www.cnblogs.com/../js_tool/css/debug.css">
    <style type="text/css">
        *{ margin: 0; padding: 0;}
        #view{ position: relative; left: 25px; top:25px; width: 400px; height: 100px; border: 100px solid #adff2f; background: #ff8c00;}
        #view_2{ position: absolute; left: 75px; top:375px; width: 300px; height: 100px; background: #008b8b;}
    </style>
</head>
<body>
<div id="fake" style=" position: absolute; left: 10px; top:10px; width: 3000px; height: 2000px; background: #d3d3d3; padding: 50px;">
<div id="view"></div>
<div id="view_2"></div>
</div>
<script type="text/javascript" src="http://www.cnblogs.com/../common_js/Xe.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/../js_tool/js/debug.js"></script>
<script type="text/javascript">
    var debug = new Xe.debug('调试面板1');
    debug.createPanel();
    document.onclick = function(e){
        e = e || window.event;
        debug.log('e.pageX:',e.pageX);
        debug.log('e.layerX:',e.layerX);
        debug.log('e.offsetX:',e.offsetX);
        debug.log('e.clientX:',e.clientX);
        debug.log('e.x:',e.x);
    }
</script>
</body>
</html>

图示：

测试结果如下：

chrome：

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——相对当前坐标系的border左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

ff：

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标
e.offsetX——无
e.clientX——相对可视区域的坐标
e.x——无

opera：

e.pageX——相对整个页面的坐标
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

safari：（这个和chrome是一样的）

IE9：

e.pageX——相对整个页面的坐标
e.layerX——相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离（这个NB轰轰了····=。=）
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

IE8：

e.pageX——无
e.layerX——无
e.offsetX——相对当前坐标系的内容区域左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对当前坐标系的border左上角开始

IE7：

IE6：

综合为下表：