1.7 KiB
>页面尺寸
>>宽高尺寸
clientWidth / clientHeight窗口的宽度高度
scrollWidth / scrollHeight文档内容的高度宽度
offsetWidth / offsetHeight文档内容的高度宽度
>>坐标位置
scrollleft / scrollTop滚轴的水平便宜距离，垂直偏移距离
offsetLeft / offsetTop对象与页面的边距
event.clientX / event.clientY事件触发时，鼠标指针对窗口的水平垂直坐标(event为时间)
//注意事项：documentElement是整个节点树的根节点root，即html标签，document.body也是document能直接调用的属性标签
语法：
object.offsetLeft/oobject.offsetTop
>拖拽功能的实现
[html] view plain copy
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>event</title>
-
<style>
-
#box {
-
width: 100px;
-
height: 100px;
-
background-color: aquamarine;
-
position: absolute;
-
}
-
</style>
-
</head>
-
<body>
-
<div id="box"></div>
-
<script type="text/javascript">
-
var oDiv = document.getElementById("box");
-
oDiv.onmousedown = function(ev){
-
var oEvent = ev;
-
var disX = oEvent.clientX-oDiv.offsetLeft;
-
var disY = oEvent.clientY-oDiv.offsetTop;
-
document.onmousemove = function(ev){
-
oEvent = ev;
-
oDiv.style.left = oEvent.clientX - disX +"px";
-
oDiv.style.top = oEvent.clientY - disY +"px";
-
}
-
document.onmouseup = function(){
-
document.onmousemove = null;
-
document.onmouseup = null;
-
}
-
}
-
</script>
-
</body>
-
</html>