本文主要是介绍元素offsetXxx,clientXxx,scrollXxx,鼠标screenX,clientX,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
注意: 很多标签都自带初始样式属性值,这容易使布局达不到预期效果,为避免不必要麻烦,在css中利用通配符 “ * ” 设置统一样式
*{border:0;padding:0;margin:0;
}
1. 属性说明:
内容仅个人简单测试后归纳的,测试的代码在下面(“ 2. 测试示例:”)有需要可以自己复制粘贴后自己去测试总结。
除scrollTop和scrollLeft外其余属性都是只读
offsetTop = 与最近一个已定位父元素内顶部的距离offsetTop = 没有定位的父元素时:则是到<html>标签顶部的距离(如果设置了html和body的border则需加入<html>标签border的大小--也别忽略了<body>标签的)非必要不动body和html的样式offseLeft ...offsetWidth = 左右border+左右padding+widthoffsetHeight = 上下border+上下padding+heightclientLeft = border(左边框)clientTop = border(上边框)clientWidth = width-左滚动条宽度(如果有)+左右paddingclientHeight = height-底部滚动条宽度(如果有)+上下padding滚动条的width = offsetWidth - clientWidth - 左右border滚动条会占用widthscrollTop = 元素内容超出上边界内容部分的高度(不考虑border的大小)scrollLeft = 元素内容超出左边界内容部分的宽度(不考虑border的大小)scrollHeight = padding+内容最大高度 (滚动条从头滑到尾过程中所有内容变化部分)scrollWidth = padding+内容最大宽度 (滚动条从头滑到尾过程中所有内容变化部分)**鼠标事件的相关距离**screenX = 鼠标到屏幕的水平距离screenY = 鼠标到屏幕的垂直距离clientX = 鼠标到浏览器内容区域的水平距离clientY = 鼠标到浏览器内容区域的垂直距离pageX = 鼠标相对浏览器内容区域的水平距离(包含滚动条未显示区域的宽度)pageY = 鼠标相对浏览器内容区域的垂直距离(包含滚动条未显示区域的长度)
注:个人在测试offsetTop(Left )时,目标元素在没有已定位(position)的父元素下时,设置’html’标签的border:1px时,获取到的offsetTop包含了该border值,设置了‘body’标签的border值时offsetTop也包含了body的border值;在给目标元素套了一个设置了定位的父元素并给父元素时设置了border值的情况下,获取到的offsetTop并没有包含border,也就是此时以到border(上边框)底部的距离为参考。
offsetXxx:
clientXxx:
scrollXxx:
2. 测试示例:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}
/* html{border: 0px;} */#box{width: 90px;height: 80px;padding: 100px;margin: 70px;background-color: #5d5d5d;border: 50px solid black;text-align: center;overflow: scroll;}</style></head><body><div id="box">天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/>天气还好<br/></div>//用于显示相关数据<div id="innerHTML"></div></body><script type="text/javascript">//打印相关数据box=document.getElementById('box')data='offsetTop: '+box.offsetTop+'<br/>offsetLeft: '+box.offsetLeft+'<br/>offsetWidth: '+box.offsetWidth+'<br/>offsetHeight: '+box.offsetHeight+'<br/>'+'<br/>clinetTop: '+box.clientTop+'<br/>clientLeft: '+box.clientLeft+'<br/>clientWidth: '+box.clientWidth+'<br/>clientHeight: '+box.clientHeight+'<br/>'+'<br/>scrollTop: '+box.scrollTop+'<br/>scrollLeft: '+box.scrollLeft+'<br/>scrollWidth: '+box.scrollWidth +'<br/>scrollHeight: '+box.scrollHeight +' ----> 11行内容,每行21px,上下padding共200,合记431px'+'<br/><br/>右滚动条宽度: '+(box.offsetWidth-box.clientWidth-100)document.getElementById('innerHTML').innerHTML=data//双击触发鼠标事件打印鼠标相关位置信息box.ondblclick=function(e){console.log("\nbox.scrollTop: "+box.scrollTop+"\nbox.scrollLeft: "+box.scrollLeft+"\nclientX: "+e.clientX+"\nclientY: "+e.clientY+"\nscreenX: "+e.screenX+"\nscreenY: "+e.screenY)}</script>
</html>
效果:
这篇关于元素offsetXxx,clientXxx,scrollXxx,鼠标screenX,clientX的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!