跳到主要内容

2 篇博文 含有标签「html」

查看所有标签

· 阅读需 3 分钟
GSemir

元素/鼠标的位置​

getBoundingClientRect()​

获取包含整个元素的最小矩形（包括 padding 和 border-width），相对视口左上角，使用x、y、top、left、bottom、right等属性描述整个矩形的位置

image-20240315140408927

const element = document.getElementById("myElement");
const rect = element.getBoundingClientRect();
console.log("元素左上角的X坐标：" + rect.left);
console.log("元素左上角的Y坐标：" + rect.top);
console.log("元素右下角的X坐标：" + rect.right);
console.log("元素右下角的Y坐标：" + rect.bottom);

offsetTop 和 offsetLeft 属性：​

相对父元素的偏移量

image-20240315142059782

const element = document.getElementById("myElement");
console.log("元素的上边缘的偏移量：" + element.offsetTop);
console.log("元素的左边缘的偏移量：" + element.offsetLeft);

pageX 和 pageY 属性：​

screen >= page >= client

pageX/Y获取到的是鼠标相对文档区域左上角距离，会随着页面滚动而改变

element.addEventListener("mousemove", function(event) {
  console.log("鼠标的X坐标：" + event.pageX);
  console.log("鼠标的Y坐标：" + event.pageY);
});

clientX 和 clientY 属性：​

clientX/Y获取到的是鼠标相对浏览器可视区域左上角距离，不随页面滚动而改变

element.addEventListener("mousemove", function(event) {
  console.log("鼠标在视口中的X坐标：" + event.clientX);
  console.log("鼠标在视口中的Y坐标：" + event.clientY);
});

screenX 和 screenY 属性：​

screenX/Y获取到的是鼠标相对显示器屏幕左上角的距离，不随页面滚动而改变。

image-20240315145513092

元素的尺寸​

不可靠的方式​

window.getComputedStyle(dom).width

获取 CSSOM 树（浏览器渲染第二步）的节点尺寸

不一定能反应界面上的最终实际尺寸（padding，border，flex）

dom.style.width

获取 dom 元素（DOM 树）上的 style 属性，即内联样式，同样不一定能反应界面上的实际尺寸（还可能读不到）

以下三种方式读到的是 Layout 树的信息，可以读到元素的几何信息（不考虑 transform）

dom.clientWidth​

content + padding

dom.offsetWidth​

content + padding + scroll + border

clientWidth + scroll + border

dom.scrollWidth​

可滚动区域的全部尺寸

image-20240315160052452

getBoundingClientRect()​

读取到的是在浏览器渲染管线最后一步 draw 后的尺寸数据，也就是我们能看到的元素的实际最终尺寸

draw 阶段会处理一些 transform 变换，本质上是矩阵变换，由 GPU 计算并绘制到屏幕中，效率非常高

image-20240315160714012

· 阅读需 2 分钟
GSemir

data-* 属性允许我们在标准、语义化的 HTML 元素中存储额外的信息，而不需要使用类似于非标准属性或者 DOM 额外属性之类的技巧。

所有在元素上以data-开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。

你可以使用getAttribute()配合它们完整的 HTML 名称去读取它们，但标准定义了一个更简单的方法：DOMStringMap你可以使用dataset读取到数据。

为了使用dataset对象去获取到数据属性，需要获取属性名中data-之后的部分 (要注意的是破折号连接的名称需要改写为骆驼拼写法 (如"index-number"转换为"indexNumber"))。

var article = document.querySelector("#electriccars");

article.dataset.columns; // "3"
article.dataset.indexNumber; // "12314"
article.dataset.parent; // "cars"

比如你可以通过generated content使用函数attr()来显示 data-parent 的内容： article::before { content: attr(data-parent); }

你也同样可以在 CSS 中使用属性选择器根据 data 来改变样式： article[data-columns="3"] { width: 400px; } article[data-columns="4"] { width: 600px; }