**JAVASCRIPT** DOM对象三
2016-07-13 18:54
295 查看
>页面尺寸
>>宽高尺寸
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
>拖拽功能的实现
//等待认真学习中... ...
>>宽高尺寸
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> <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>
//等待认真学习中... ...
相关文章推荐
- JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
- HTML5提供的拖拽功能
- 关于使用jQuery EASYUI的一些小技巧
- C# 设置word文档页面大小
- Android自定义控件热身——View的坐标位置和大小详解
- 解决网页在手机端显示界面很小的问题
- android应用程序中获取view的位置
- JavaSwing_5.5: 拖拽功能
- 分页存储和分段存储的一些小问题解答
- 鼠标拖拽功能实现
- 2016.11.30 调整iframe中镶嵌的页面
- 解决layer弹出层自适应页面大小的问题
- javascript中对象写在函数外面,函数内部不能使用
- Chrome开发者工具不完全指南(二、进阶篇)
- jsp基础
- Js多线程?
- js中替换字段的replace用法
- safari对web调试
- Leafletjs学习教程和相关代码整理
- 一分钟带你理解闭包--js面向对象编程