zoukankan      html  css  js  c++  java
  • offsetTop,clientX,clientTop,clientWidth,offsetWidth 坐标,一次弄明白

    这几个属性都是IE火狐完全兼容的,不多说,看我测试结果便知:

    【源码如下】

    <!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">
    <head>
        <title></title>

        <script type="text/javascript">
            function Position(eve) {
                var t = document.getElementById("div1");
                var e = eve || event;
                var DivOffsetTop = t.offsetTop; //=Top+MarginWidth=100+3=103
                var DivOffsetleft = t.offsetLeft; //Left+MarginWidth=50+3=53
                var EventTop = e.clientY;
                var EventLeft = e.clientX;
                var DivTop = t.style.top;
                var DivLeft = t.style.left;
                var DivClientTop = t.clientTop; //BorderWidth
                var DivClientLeft = t.clientLeft; //BorderWidth
                var DivClientWidth = t.clientWidth; //Width+2PaddingWidth=200+2*11=222
                var DivClientHeight = t.clientHeight; //Height+2PaddingWidth=300+2*11=322
                var DivOffsetWidth = t.offsetWidth; //=2BorderWidth+Width+2PaddingWidth=2*7+200+2*11=236
                var DivOffsetHeight = t.offsetHeight; //=2BorderWidth+Height+2PaddingWidth=2*7+300+2*11=336
                var BodyClientTop = document.body.clientTop;
                var BodyClientLeft = document.body.clientLeft;
                var DivWidth = t.style.width;
                var DivHeight = t.style.height;
                var DivBorderWidth = t.style.borderWidth;
                var DivPaddingWidth = t.style.padding;
                var DivMaginWidth = t.style.margin;
                var R = "DivOffsetleft:" + DivOffsetleft + "--DivOffsetTop:" + DivOffsetTop; //103 53
                R += "\nEventLeft:" + EventLeft + "--EventTop:" + EventTop; //>=103 >=53
                R += "\nDivLeft:" + DivLeft + "--DivTop:" + DivTop; //100px 50px
                R += "\nDivClientLeft:" + DivClientLeft + "--DivClientTop:" + DivClientTop; //7 7
                R += "\nBodyClientLeft:" + BodyClientLeft + "--BodyClientTop:" + BodyClientTop; //5 5
                R += "\nDivClientWidth:" + DivClientWidth + "--DivClientHeight:" + DivClientHeight; //222 322
                R += "\nDivWidth:" + DivWidth + "--DivHeight:" + DivHeight; //200 300
                R += "\nDivOffsetWidth:" + DivOffsetWidth + "--DivOffsetHeight:" + DivOffsetHeight; //236 336
                R += "\nDivBorderWidth:" + DivBorderWidth //7px
                R += "\nDivMaginWidth:" + DivMaginWidth //3px
                alert(R);
            }
        </script>

    </head>
    <body>
        <input type="button" id="btn" value="测试位置" />
        <br />
        <div id="div1"line-height: normal; ">         top: 50px; left: 100px; border: 7px solid red; padding: 11px; margin: 3px;" onmousedown="Position(event)">
            这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
            这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
            这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
        </div>
    </body>
    </html>

  • 相关阅读:
    嵌入式MicroFlighter 之STM32F103学习——编写第一个STM32程序
    嵌入式stm32学习方法
    嵌入式stm32学习之路(led流水灯工程)
    嵌入式stm32 LED 流水灯剖析(库函数版)
    Swift快速入门(一)第一个Swift程序
    从库函数方向入门stm32的个人建议
    嵌入式STM32使用PWM控制LED呼吸灯效果
    嵌入式STM32学习笔记之按键查询方式控制led灯的亮灭
    从零写一个编译器(完结):总结和系列索引
    从零写一个编译器(十三):代码生成之遍历AST
  • 原文地址:https://www.cnblogs.com/top5/p/1972368.html
Copyright © 2011-2022 走看看