专栏首页学习分享-实践为王clientX、clientY、offsetLeft、offsetTop等几种区别不同
原创

clientX、clientY、offsetLeft、offsetTop等几种区别不同

(1) clientX和clientY

clientX: 鼠标点击处到浏览器窗口的横距离

clientY: 鼠标点击处到浏览器窗口的纵距离

(2) offsetLeft和offsetTop

offsetLeft,offsetTop:相对于最近的祖先定位元素。也就是鼠标点击的位置到相对元素边框的距离。

(3) offsetWidth和offsetHeight

整个元素的尺寸(不包括变宽的宽度)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第52天:offset家族、scroll家族和client家族的区别

    半指温柔乐
  • 【实例】调整区域大小&动态隐藏区域

    实例参照地址:https://jsfiddle.net/381510688/fb6Lz9rm/

    奋飛
  • 常用的web方法 web API(二)

    在上一篇《常用的web方法 web API(一)》中我们学习了:绑定事件的几种方式、解绑事件的几种方式、创建元素的几种方式、获取节点的几种方式本篇我们将继续学习...

    凯哥Java
  • H5基于Canvas实现电子签名并生成PDF文档

    原文:https://juejin.cn/post/6901273585428463624

    zz_jesse
  • JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

    首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.

    stys35
  • html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍(转)

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    山河木马
  • 追求完美代码之——实现元素拖拽修改宽高和位移插件

    我们如果使用过ppt、keynote,元素的小控件一定少不了,可以实现修改修改宽高和位移,大概是这样

    lhyt
  • js、jQuery 获取文档、窗口、元素的各种值

    浏览器当前窗口文档body的宽度: document.body.clientWidth;(仅仅是body的width) 浏览器当前窗口文档body的高度: do...

    Krry
  • 干货丨JS 经典实例收集整理

    一、跨浏览器事件 跨浏览器添加事件 //跨浏览器添加事件    function addEvent(obj,type,fn){        if(obj.a...

    腾讯NEXT学位
  • 第43天:事件对象event

    一、事件对象 事件:onmouseover、 onmouseout、 onclick event //事件的对象

    半指温柔乐
  • 详解各种获取元素宽高及位置的属性

    offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局...

    laixiangran
  • Vue拖拽组件开发实例

    vue是一套用于构建用户界面的渐进式框架。可以用他来封装单文件组件来开发更为复杂的单页应用。 本文主要是通过封装一个拖拽组件的例子,来分析Vue组件化相关知识。

    京东技术
  • HTML页面导出PDF——高清版

      需要做一个导出PDF的功能,网上找有很多,但是一般导出来的都是比较模糊的那种,下面这个是高清版的,导出的PDF都是几M,跟正常手动导出的差不多,很清晰。

    _一级菜鸟
  • js获取鼠标当前位置坐标

    chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)

    OECOM
  • 从零开始学 Web 之 BOM(四)client系列

    这时候,如果鼠标不动,只滚动滑轮的话,会发现图片会距离鼠标原点越来越远。为什么呢?

    Daotin
  • Canvas系列(15):实战-小球拖拽

    在上一章中我们实现的小球的碰撞,这章中我们继续玩玩小球,讲解一下小球的拖拽,为了避免代码的混乱本章中就不考虑小球碰撞的情况了,有兴趣的自己看看上一章。

    kai666666
  • 【实战】Canvas实现图片上标注、缩放、移动和保存历史状态

    面试官说可以往深层次思考一下,或许加一些新的功能来增加项目的难度,他提了几个建议,其中一个就是试卷在线批阅,老师可以在上面对作业进行批注,圈圈点点等俺当天晚上就...

    Nealyang
  • 抛物线飞入购物车?原来如此简单!

    前言:最近有朋友在做小程序的过程中,遇到开发过飞入购物车效果的功能的需求。针对这个情况一些网上的demo,多少会有一些不符合情景的问题(bug)存在,针对这一情...

    用户6835371
  • 偏移量、客户区大小、视口大小、滚动大小、确定元素大小

    1、偏移量 先讲几个偏移量属性: offsetHeight:元素在垂直方向上占用的空间大小;相当于border-top+padding-top+height...

    Ewall

扫码关注云+社区

领取腾讯云代金券