鼠标元素或位置的属性

<!DOCTYPE html>
<html>

    <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                    #div {
                            width: 100px;
                            height: 100px;
                            background: red;
                    }
            </style>
            <script type="text/javascript">
                    window.onload = function() {
                            //鼠标的坐标

1、clientX 是得到鼠标点击时距离浏览器左边框的数值
clientY 是得到鼠标点击时距离浏览器顶部的数值

2、offsetLeft：得到当前标签左侧距离参照定位标签的左侧之间的距离(如果当前标签以及他的父级标签没有设置定位，则获取到的距离边框的位置，如果当前标签设置的定位方式，则获取到的位置是距离他参照定位标签之间的位置)
2、1 offsetTop :得到的是当前距离顶部的距离,(如果其父级元素没有设置了定位,则获取的是距离浏览器顶部之间的距离,如果当前标签设置了定位,则获取到的是距离他参照定位标签顶部的距离)

3、left: css下的属性，标签设置定为后，可以通过这个属性让标签移动，该属性获取到的是字符串类型，是距离参照定位标签左间距
top css下的属性，标签设置定为后，可以通过这个属性以移动，该属性获取到的值为字符串类型，是距离参照定位标签的顶距离

以上两类标签的区别：
归属问题： left top 是css下的属性，而 offsetLeft offsetTop是标签下的属性
取值类型： left top 值是包含了"px"的字符串

offsetLeft offsetTop 值为数值类型
获取属性值：因为js只能获取、修改、添加行内样式，所以只有在行内样式表中的 left top 值可以取到，而 offsetLeft offsetTop 是标签属性，所以js可以直接获取到值

width、height: 设置的是标签可用空间的范围值，是一个字符串类型。如果没有写在行内样式表中，js无法获得
offsetWidth offsetHeigt获取的是标签的总宽、高度， (border+padding+width/height),值一个数值类型,js可以直接获取到值

                                var div = document.getElementById("div");
                                div.onclick = function(ev) {
                                        var e = window.event || ev
                                        console.log(e.clientX);
                                        console.log(this.offsetLeft)
                                }

                        }
                </script>
        </head>

        <body>
                <div id="div">

                </div>
        </body>

</html>来源： http://10.0.88.88:8083/forum.php?mod=viewthread&tid=43756

鼠标元素或位置的属性

推荐阅读更多精彩内容