开发者社区开发与运维文章正文

前端 CSS 经典：鼠标位置信息

2024-07-02 32

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端 CSS 经典：鼠标位置信息

前言：当监听鼠标事件时，需要了解鼠标属性所代表的位置信息

dom.addEventListener("click", (e) => {
  e.pageX;
  e.clientX;
  e.offsetX;
  e.movementX;
});

1. pageX

表示鼠标距离整个页面左边缘的距离，就算有滚动条，最左边看不到了，也是到那边的距离。

2. clientX

表示鼠标相对于视口左边的距离，视口就是能看见的地方。

3. offsetX

表示鼠标距离事件源左边缘的距离

4. movementX

表示这一次鼠标事件距离上一次鼠标事件横向上的偏移量

文章标签：

前端开发

关键词：

前端css

前端信息

CSS前端

CSS鼠标

前端鼠标

yqcoder

土木林森

2月前

前端开发 JavaScript C++

揭秘Web前端CSS引入秘籍：Link vs @import，你的选择决定页面加载速度，你选对了吗？

【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法，主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`<link>`和`@import`两种引入方式。`<link>`作为HTML元素，在页面加载初期就开始加载样式资源，支持并行加载，对提高页面加载速度有益。而`@import`作为一种CSS规则，仅能在CSS文件中使用，其引入的样式表会在页面完成加载后才开始加载，可能导致渲染延迟且不支持并行加载。因此，在多数情况下，推荐采用`<link>`方式引入外部样式表，以确保更佳的性能表现和浏览器兼容性。

土木林森

71 2 3

小徐在进步

22天前

前端开发

【前端web入门第四天】02 CSS三大特性+背景图

本文详细介绍了CSS的三大特性：继承性、层叠性和优先级，并深入讲解了背景图的相关属性，包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中，继承性指子元素自动继承父元素的文字控制属性；层叠性指相同属性后定义覆盖前定义，不同属性可叠加；优先级涉及选择器权重，包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。

小徐在进步

239 91 91

六卿

7天前

前端开发

前端基础(五)_CSS文本文字属性、背景颜色属性

本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。

六卿

11 3 3

六卿

7天前

前端开发

前端基础(九)_CSS的三大特征

本文详细解释了CSS的三大特性：层叠性、继承性和优先级，并通过实例演示了样式冲突、叠加和选择器优先级的应用。

六卿

11 2 2

小徐在进步

22天前

前端开发数据安全/隐私保护

【前端web入门第二天】03 表单-下拉菜单文本域 label标签按钮【附注册信息综合案例】

本文档详细介绍了HTML表单的多种元素及其用法，包括下拉菜单（`<select>` 和 `<option>`）、文本域（`<textarea>`）、标签解释（`<label>`）、各类按钮（`<button>`）及表单重置功能、无语义布局标签（`<div>` 和 `<span>`）以及字符实体的应用。此外，还提供了一个完整的注册信息表单案例，涵盖个人信息、教育经历和工作经历等部分，展示了如何综合运用上述元素构建实用的表单。

小徐在进步

30 6 6

【前端web入门第二天】03 表单-下拉菜单文本域 label标签按钮【附注册信息综合案例】

小徐在进步

22天前

前端开发

【前端web入门第三天】02 CSS字体和文本

本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性，通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性，并提供了实用的代码示例。此外，还简要介绍了调试工具中的一些细节，如错误属性标识和属性生效状态的控制。

小徐在进步

50 28 29

六卿

7天前

编解码前端开发

前端基础(六)_CSS单位

本文介绍了CSS中常用的单位，包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用，解释了它们各自的特点和使用场景。例如，em和rem单位与字体大小相关，百分比单位与父元素的尺寸相关，而vw和vh单位则与浏览器视窗的宽度和高度相关。

六卿

10 1 1

六卿

7天前

前端开发

前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器

本文详细介绍了CSS（层叠样式表）的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用，展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS，讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外，还强调了使用`!important`规则时的优先级高于行内样式。

六卿

31 1 1

小徐在进步

22天前

前端开发 JavaScript

【前端web入门第三天】01 css定义和引入方式四种标签选择器

本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式，包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外，还深入解析了不同种类的选择器：标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景，并提供了实例帮助理解。最后，通过具体的新属性示例，指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。

小徐在进步

35 15 15

小徐在进步

21天前

前端开发

【前端web入门第八天】定位、CSS精灵与一些其他CSS高级技巧

定位、CSS精灵与一些其他CSS高级技巧

小徐在进步

24 9 9

前端 CSS 经典：鼠标位置信息

1. pageX

2. clientX

3. offsetX

4. movementX

热门文章

最新文章

相关课程

相关电子书

相关实验场景