js 计算WEB元素的距离

最新推荐文章于 2022-04-30 15:39:39 发布

xsh118

最新推荐文章于 2022-04-30 15:39:39 发布

阅读量184

点赞数

文章标签： type availheight center

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>index.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<!--
   //定位位置
   CSS: position(absolute-绝对的,相对欣赏器,relative-相对的,相对父对象   top,right,bottom,left,z-index)
   window.dialogHeight 设置或获取模式对话框的---高度
   window.dialogLeft 设置或获取模式对话框的---左坐标
   window.dialogTop 设置或获取模式对话框的---顶坐标
   window.dialogWidth 设置或获取模式对话框的---宽度
   window.screenLeft 获取欣赏器客户区左上角相对于---屏幕左上角的 x 坐标
   window.screenTop 获取欣赏器客户区左上角相对于---屏幕左上角的 y 坐标
   window.event.clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件战滚动条
   window.event.clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件战滚动条
   window.event.offsetX 设置或获取鼠标指针位置相对于触收事件的对象的 x 坐标
   window.event.offsetY 设置或获取鼠标指针位置相对于触收事件的对象的 y 坐标
   window.event.screenX 设置或获取鼠标指针位置相对于用户屏幕的 x 坐标
   window.event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标
   window.event.x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标
   window.event.y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标
   window.screen.availHeight 获取系统屏幕的工作区域高度，排除 Microsoft? Windows? 任务栏
   window.screen.availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏
   window.screen.height 获取屏幕的垂直分辨率
   window.screen.width 获取屏幕分辨率的宽

   网页可见区域宽：document.body.clientWidth
   网页可见区域高：document.body.clientHeight
   网页可见区域宽：document.body.offsetWidth (包括边线的宽)
   网页可见区域高：document.body.offsetHeight (包括边线的宽)
   网页正文全文宽：document.body.scrollWidth
   网页正文全文高：document.body.scrollHeight
   网页被卷去的高：document.body.scrollTop
   网页被卷去的左：document.body.scrollLeft

   HTML精肯定位:clientWidth:
   scrollHeight: 获取对象的滚动高度。
   scrollLeft:设置或获取位于对象左边界战窗口中目前可见内容的最左端之间的间隔
   scrollTop:设置或获取位于对象最顶端战窗口中可见内容的最顶端之间的间隔
   scrollWidth:获取对象的滚动宽度
   obj.offsetHeight: 指obj控件自身的绝对高度
   obj.offsetWidth: 指obj控件自身的绝对宽度
   offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的较量争论左侧位置
   offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的较量争论顶端位置
   document.div.scrollTop 垂直方向滚动的值
   event.clientX + document.div.scrollTop 相对文档的水平座标+垂直方向滚动的量

   IE，FireFox 差异如下：
   IE6.0、FF1.06+：
   clientWidth = wi姚笛"出轨门"后近照曝光dth + padding
   clientHeight = height + padding
   offsetWidth = width + padding + border
   offsetHeight = height + padding + border
-->
<script type="text/javascript">
//设置DIV的位置
   function setOffsets()
   {
    var popup = document.getElementById('popup');
    var inputv = document.getElementById('inputObj');

    var width = inputv.offsetWidth;
    var left = getOffsetLeft(inputv);
    var top = getOffsetTop(inputv) + inputv.offsetHeight;

    popup.style.border = '1px solid lightblue';//悬浮DIV popup
    popup.style.width = width + "px";
    popup.style.left = left + "px";
    popup.style.top = top + "px";

    popup.style.height = "100px";
   }
   //间隔左边的间隔
   function getOffsetLeft(field)
   {
    return getOffset(field,"offsetLeft");
   }
   //间隔顶部的间隔
   function getOffsetTop(field)
   {
    return getOffset(field,"offsetTop");
   }
   //循环结点得到相对间隔
   function getOffset(field,attr)
   {
    var offset = 0;
    while(field)
    {
     offset += field[attr];
     field = field.offsetParent;
    }
    return offset;
   }
</script>
<body>
   <div style="text-align: center;">
    <input name="inputObj" id="inputObj"><input type="button" value="list" onclick="setOffsets();"/>
   </div>
   <div id="popup" style="position: absolute;"></div>
</body>
</html>