JS dom元素和鼠标位置之间的一系列属性快速参考

这篇具有很好参考价值的文章主要介绍了JS dom元素和鼠标位置之间的一系列属性快速参考。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

clientHeight     获取对象的高度,不计算任何边距、边框、滚动条,但包括该对象的补白。
clientLeft     获取    offsetLeft     属性和客户区域的实际左边之间的距离。
clientTop     获取    offsetTop     属性和客户区域的实际顶端之间的距离。
clientWidth     获取对象的宽度,不计算任何边距、边框、滚动条,但包括该对象的补白。
offsetHeight     获取对象相对于版面或由父坐标    offsetParent     属性指定的父坐标的高度。
offsetLeft     获取对象相对于版面或由    offsetParent     属性指定的父坐标的计算左侧位置。
offsetParent     获取定义对象    offsetTop     和    offsetLeft     属性的容器对象的引用。
offsetTop     获取对象相对于版面或由    offsetTop     属性指定的父坐标的计算顶端位置。
offsetWidth     获取对象相对于版面或由父坐标    offsetParent     属性指定的父坐标的宽度。
offsetX     设置或获取鼠标指针位置相对于触发事件的对象的    x     坐标。
offsetY     设置或获取鼠标指针位置相对于触发事件的对象的    y     坐标。
clientX,clientY   鼠标当前相对于网页的位置,当鼠标位于页面左上角时clientX=0, clientY=0
screenX, screenY是相对于用户显示器的位置

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth    (包括边线的宽)
网页可见区域高: document.body.offsetHeight   (包括边线的宽)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth文章来源地址https://www.toymoban.com/news/detail-641627.html

到了这里,关于JS dom元素和鼠标位置之间的一系列属性快速参考的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML DOM 事件 —— 鼠标事件 JS鼠标事件

    onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发.。 onmousedown 鼠标按钮被按下。 onmouseup 鼠标按键被松开。 onmouseenter 当鼠标指针移动到元素上时触发。 onmouseleave 当鼠标指针

    2024年02月08日
    浏览(41)
  • 前端:常用的获取元素位置与元素尺寸的属性与方法

    属性/方法 描述 clientWidth 返回元素内容区的宽度(不包括滚动条、边框和外边距)。对于 box-sizing: border-box 的元素,包含内边距。 clientHeight 返回元素内容区的高度(不包括滚动条、边框和外边距)。对于 box-sizing: border-box 的元素,包含内边距。 offsetWidth 返回元素的总宽度,

    2024年04月13日
    浏览(74)
  • JS中获取dom元素高度相关方法

    javascript中获取dom元素高度和宽度的属性如下: 网页可视区域宽: document.body.clientWidth 网页可视区域高: document.body.clientHeight 网页可视区域宽: document.body.offsetWidth (包括边距的宽) 网页可视区域高: document.body.offsetHeight (包括边距的高) 网页正文全文宽: document.body.scrollWidth

    2024年02月07日
    浏览(53)
  • JS 获取 HTML DOM 元素的方法

     

    2024年02月11日
    浏览(44)
  • js获取dom元素宽高的方法

    这种⽅法,有⼀定局限性,只能取 内联样式 的宽⾼。 这种⽅法,也是有⼀定局限性,不过我们三种常⽤css样式都能获取。但是 只⽀持 IE ,其它浏览器不⽀持 ⽀持所有浏览器,兼容性好 这种⽅法,⼀般⽤于计算元素的绝对位置,根据视窗左上⻆的点来算的。可以拿到四个元

    2024年02月15日
    浏览(51)
  • js操作shadow-root内的DOM元素

    一、背景 项目中在DOM结构里遇到了shadow-root(open),用JS方法无法直接获取其内的DOM元素 二、shadow DOM Web components 的一个重要属性是封装——可以将标记结构、样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净、整洁。其中

    2024年02月15日
    浏览(39)
  • JS-DOM-12(常见的鼠标、键盘、表单事件)

    接下来我们来看一下常见的鼠标事件(不仅仅是鼠标设备,也包括模拟鼠标的设备,比如手机、平板电脑) 常见的鼠标事件: mouseover和mouseenter的区别 mouseover 和 mouseenter 都是 JavaScript 事件,用于检测鼠标指针进入一个元素的边界。然而,它们之间有一些关键区别: 事件冒泡

    2024年04月26日
    浏览(49)
  • 51-JS鼠标,键盘,表单,粘贴板,窗口事件,遍历节点树,DOM操作:创建/添加,删除,替换

    1.鼠标事件 1.1双击事件 dblclick 1.2鼠标移入,鼠标移出 mouseover,mouseout             支持事件冒泡(会传播) mouseenter,mouseleave        不支持事件冒泡(不会传播)

    2024年01月18日
    浏览(72)
  • JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath

    js代码,鼠标在页面点击时,记录元素的Xpath 代码:  

    2024年02月15日
    浏览(49)
  • HTML元素和属性快速参考指南

    ​ 以下是几个与HTML元素和属性相关的参考资料网站链接: HTML Reference - 提供所有HTML元素和属性的免费指南。 W3Schools HTML Reference - W3Schools 提供一个广泛的HTML标签和属性参考。 freeCodeCamp HTML Cheat Sheet - freeCodeCamp 提供了一个HTML元素列表参考,适合初学者。 ​​​​​​​​

    2024年02月21日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包