测量网格宽度

Question

我想模仿我最喜欢的网站并测量网格排列：

如何测量每个部件的宽度？

Answer 1

如果您使用的是谷歌浏览器，则可以通过打开“检查元素”（F12）并将鼠标悬停在元素上来查看每个元素的宽度（以像素为单位）。

Answer 2

您可以通过Developer Console使用一些有用的JS属性和方法。如果您有一个要获取尺寸的元素列表并希望在不同的浏览器尺寸下获取它们，这将非常有用。

您可以在浏览器控制台中输入/粘贴以下内容：

console.log("#content width: " + document.getElementById("content").offsetWidth)
console.log("#answers width: " + document.getElementById("answers").offsetWidth)

这将提供您可以复制和粘贴的以下结果。

#content width: 1600
#answers width: 728

也可以使用Chrome调试协议执行此操作。

以下是一些可能有用的JS属性和方法：

将HTMLElement.offsetWidth宽度用作整数。您也可以使用HTMLElement.offsetWidth作为身高。

• MDN：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth
• MDN：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

  

HTMLElement.offsetWidth只读属性返回元素的布局宽度。通常，元素offsetWidth是包括元素边界，元素水平填充，元素垂直滚动条（如果存在，如果渲染）和元素CSS宽度的度量。如果元素被隐藏（例如，由元素上的style.display或它的一个祖先"none"），则返回0。

将HTMLElement.getBoundingClientRect()用于小数值：

• MDN：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

  

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。

Answer 3

我认为以下插图可以帮助您：