css坐标

 

这几个属性都是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 style="border: 5px solid red;">
    <input type="button" id="btn" value="测试位置" />
    <br />
    <div id="div1" style="width: 200px; height: 300px; background-color: Gray; position: absolute;
        top: 50px; left: 100px; border: 7px solid red; padding: 11px; margin: 3px;" οnmοusedοwn="Position(event)">
        这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
        这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
        这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
    </div>
</body>
</html>

IE效果如下:


火狐:


谷歌:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值