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>

  • 相关阅读:
    Asp.net button防止点击多次数据提交
    Asp.net button防止点击多次数据提交
    Asp.net button防止点击多次数据提交
    被投资人坑的大学生创业者
    分析了3200家创业公司
    移动互联网4种引流思维:免费思维、跨界思维、平台思维、金融思维
    腾讯入局、估值超10亿美元,“野路子”瑞幸的三大增长法则
    95后女生月入8万,竟然“玩着玩着”就赚到钱
    95后中介年入百万:“伪焦虑”是你人生最大的骗局
    一家靠收智商税盈利的公司,卖了340亿
  • 原文地址:https://www.cnblogs.com/milk/p/2445768.html
Copyright © 2011-2022 走看看