原生HTML5关于Div对象的.clientLeft、.offsetLeft、.clientX、.offsetX区分
来源:互联网 发布:苹果cms整合ck播放器 编辑:程序博客网 时间:2024/05/22 12:02
本篇主要介绍clientLeft、offsetLeft、clientX、offsetX这四种元素属性的区别,首先我们要理解清楚它们的概念:
clientLeft:该元素对象的左边框宽度。
clientWidth:该元素对象的左内边框至右内边框的距离。
offsetLeft:该元素左外边框至窗口左边界的距离。
offsetWidth:该元素左外边框至右外边框的距离。
我们可以参考下图所示:
上图测试源码为:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery/jquery-1.8.0.js"></script><style type="text/css">body {margin-left: 0px;margin-top: 0px;}#myDiv {margin-left: 50px;margin-top: 50px;border: 5px solid darksalmon;background-color: #FFE;}</style></head><body style="background-color: aliceblue;"><div id="myDiv" style="width: 100px; height: 100px;"></div><script>var jqdiv = $("#myDiv")[0];console.log(jqdiv.clientLeft); // 5console.log(jqdiv.clientWidth); // 100console.log(jqdiv.offsetLeft); // 50console.log(jqdiv.offsetWidth); // 110</script></body></html>在实现移动或拖动功能时,我们可以通过下列代码动态改变他们的位置:
jqdiv.offset({top: 10,left: 10});这里最重要的一点区别是,上面的4个对象属性都相对于标签元素;而clientX、offsetX则是相对于鼠标事件对象,即需要触发鼠标事件才会有clientX、offsetX。
clientX:当事件被触发时鼠标指针相对于窗口左边界的水平坐标。
offsetX:当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。
我们可以参考下图所示,A点被点击,当触发鼠标点击事件时:
上图测试源码为:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery/jquery-1.8.0.js"></script><style type="text/css">body {margin-left: 0px;margin-top: 0px;}#myDiv {margin-left: 50px;margin-top: 50px;border: 5px solid darksalmon;background-color: #FFE;}</style></head><body style="background-color: aliceblue;"><div id="myDiv" style="width: 100px; height: 100px;"></div><script>$("#myDiv").bind("click", function(vt) {console.log(vt.clientX); // 43+5+50 = 98console.log(vt.offsetX); // 43});</script></body></html>我们回到前面的offsetLeft这个属性,该属性有些歧义,有些网友是这样解释的:当前对象的外边框到它上层对象的内边框之间的距离。我们做个测试,看下图:
上图测试的源码为:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="jquery/jquery-1.8.0.js"></script><style type="text/css">body {margin-left: 0px;margin-top: 0px;}#myDiv {margin-left: 50px;margin-top: 50px;border: 5px solid darksalmon;background-color: #FFE;}#parentDiv {margin-left: 50px;border: 5px solid darksalmon;background-color: #FFFFEE;}</style></head><body style="background-color: aliceblue;"><div id="parentDiv"><div id="myDiv" style="width: 100px; height: 100px;"></div></div><script>console.log($("#myDiv")[0].offsetLeft); // 50+5+50 = 105</script></body></html>
为了验证正确性,我还换了不同的浏览器,通过测试可得出:offsetLeft是该元素左外边框至窗口左边界的距离。
(注)本篇介绍了clientLeft、offsetLeft、clientX、offsetX,根据本文介绍的特点,同理就可不难理解clientTop、offsetTop、clientY、offsetY的概念
(注)还有两个值很重要的值:一个是scrollTop,另一个是scrollLeft
第一个代表页面利用滚动条滚动到下方时,隐藏在滚动条上方的页面的高度;
第二个代表页面利用滚动条滚动到右侧时,隐藏在滚动条左侧的页面的宽度;
正确获取当前鼠标点击坐标算法:
Mouse.x = parseInt(event.clientX); //event表示鼠标事件Mouse.y = parseInt(event.clientY); var rect = elem.getBoundingClientRect(); //elem表示当前所点击到的显示对象,如canvasMouse.x += elem.scrollLeft - elem.clientLeft - rect.left; Mouse.y += elem.scrollTop - elem.clientTop - rect.top;
阅读全文
0 0
- 原生HTML5关于Div对象的.clientLeft、.offsetLeft、.clientX、.offsetX区分
- offsetLeft,Left,clientLeft,clientX,pageX,screenX的区别
- 区分event对象中的[clientX,offsetX,screenX,pageX]
- clientX, pageX, offsetX,x, layerX, screenX, offsetLeft
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft
- ...offsetLeft,clientX ,offsetX 定义和区别
- 区分clientX、offsetX、pageX、screenX
- 区分clientX,pageX,offsetX,x,laye…
- offsetLeft,Left,clientLeft的区别
- offsetLeft,Left,clientLeft的区别
- offsetLeft,Left,clientLeft的区别
- offsetLeft,Left,clientLeft的区别
- offsetLeft,Left,clientLeft的区别
- offsetLeft,Left,clientLeft的区别
- offsetLeft,Left,clientLeft的区别
- offsetLeft,Left,clientLeft的区别
- offsetLeft,Left,clientLeft的区别
- Linux常用命令大全
- Criteria .一种比hql更面向对象的查询方式(资料整理)
- C++虚函数与纯虚函数区别和重载的概念
- HTTPS 中双向认证
- Cannot return from outside a function or method.
- 原生HTML5关于Div对象的.clientLeft、.offsetLeft、.clientX、.offsetX区分
- 靠谱程序员必备技能——重构
- ext动态进度条
- 原生ajax请求与Promise请求
- Python+Opencv进行识别相似图片
- IPC-管道(匿名管道)
- git常用命令之git push使用说明
- 模版方法模式与策略模式如何让软件开发符合“开闭原则”
- 安装Centos6.5