• 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>

  • 相关阅读:
    C# winform 打包成安装程序(exe)
    gitHub----【Mac】sourcetree连接github,报错:fatal:Authentication failed for'https://git…。或提示password required 解决方案
    python3-----往一个字符串中循环添加数据
    python3.8----从多层嵌套Json中解析所需要的值
    记录一些工作知识
    【转】彻底搞懂 async & defer
    【转】判断JS数据类型的四种方法
    动态表单设计
    封装,继承,多态
    语义化版本
  • 原文地址:https://www.cnblogs.com/top5/p/1972368.html
Copyright © 2020-2023  润新知