元素offsetXxx,clientXxx,scrollXxx,鼠标screenX,clientX

2023-10-13 16:40

本文主要是介绍元素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 +'&nbsp;&nbsp;----> 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的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/204556

相关文章

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

使用C++实现链表元素的反转

《使用C++实现链表元素的反转》反转链表是链表操作中一个经典的问题,也是面试中常见的考题,本文将从思路到实现一步步地讲解如何实现链表的反转,帮助初学者理解这一操作,我们将使用C++代码演示具体实现,同... 目录问题定义思路分析代码实现带头节点的链表代码讲解其他实现方式时间和空间复杂度分析总结问题定义给定

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中<trim>元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中,<trim>元素用于动态地添加SQL语句的一部分,例如SET或W

韦季李输入法_输入法和鼠标的深度融合

在数字化输入的新纪元,传统键盘输入方式正悄然进化。以往,面对实体键盘,我们常需目光游离于屏幕与键盘之间,以确认指尖下的精准位置。而屏幕键盘虽直观可见,却常因占据屏幕空间,迫使我们在操作与视野间做出妥协,频繁调整布局以兼顾输入与界面浏览。 幸而,韦季李输入法的横空出世,彻底颠覆了这一现状。它不仅对输入界面进行了革命性的重构,更巧妙地将鼠标这一传统外设融入其中,开创了一种前所未有的交互体验。 想象

遮罩,在指定元素上进行遮罩

废话不多说,直接上代码: ps:依赖 jquer.js 1.首先,定义一个 Overlay.js  代码如下: /*遮罩 Overlay js 对象*/function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩状态 true 激活,f

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图

Unity3D自带Mouse Look鼠标视角代码解析。

Unity3D自带Mouse Look鼠标视角代码解析。 代码块 代码块语法遵循标准markdown代码,例如: using UnityEngine;using System.Collections;/// MouseLook rotates the transform based on the mouse delta./// Minimum and Maximum values can

简单的角色响应鼠标而移动

actor类 //处理移动距离,核心是找到角色坐标在世界坐标的向量的投影(x,y,z),然后在世界坐标中合成,此CC是在地面行走,所以Y轴投影始终置为0; using UnityEngine; using System.Collections; public class actor : MonoBehaviour { public float speed=0.1f; CharacterCo

JS和jQuery获取节点的兄弟,父级,子级元素

原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素。 <div id="test"><div></div><div></div