zoukankan      html  css  js  c++  java
  • Browser clientX scrollLeft clientLeft

    1. clientHeight :  都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
    2. clientLeft,clientTop:这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.
    3. scrollHeight,scrollWidth:不管有多少对象在页面上可见,他们得到的是整体.
    4. scrollLeft,scrollTop:如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
    对于不可以滚动的元素,这些值总是0.

    5.event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标

    其它的相关:

    scrollHeight: 获取对象的滚动高度(包括padding,不包括border )。
    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
    scrollWidth:获取对象的滚动宽度
    offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
    offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
    offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

    document.documentElement.scrollTop 垂直方向滚动的值
    event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>豪情</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <style type="text/css">
            #c{position:absolute;200px;height:200px;border:20px solid #ccc;background:#fff;padding:10px;display:none;}
            body{background:#eee;}
        </style>
    </head>
    <body>
        
        <div id="c">
        x: <input type="text" name="" id="a" /><br />
        y: <input type="text" name="" id="b" />
        </div>
        <script type="text/javascript">
            var a = document.getElementById('a'), b = document.getElementById('b'), c = document.getElementById('c');
            document.onmousemove = function(e) {
                var e = e || window.event;
                var x = e.clientX + document.documentElement.scrollLeft - document.body.clientLeft + 'px', y = e.clientY + document.documentElement.scrollTop + 'px';
                //alert('x = ' + x + '\ny = ' + y);
                a.value = x;
                b.value = y;
                
                c.style.display = 'block';
                c.style.left = parseInt(x) + 20 + 'px';
                c.style.top = parseInt(y) + 20 + 'px';
            }
        </script>
    </body>
    </html>

  • 相关阅读:
    微软外服 AlI In One
    js 循环多次和循环一次的时间的性能对比 All In One
    vue inject All In One
    Excel 表格数据倒置 All In One
    SVG tickets All In One
    OH MY ZSH All In One
    js array for loop performance compare All In One
    mac terminal show You have new mail All In one
    新闻视频 26 制作母版页
    转自牛腩 母版页和相对路径
  • 原文地址:https://www.cnblogs.com/milk/p/2445768.html
Copyright © 2011-2022 走看看