HTML | DOM 长度属性

HTML 和 DOM 包含了一些有用的长度属性，可以帮助程序员精确地确定元素的大小和位置。以下是一些常用的 HTML 和 DOM 长度属性。

HTML 长度属性

width 和 height

width 和 height 属性用于指定图像、视频、HTML 表格等元素的宽度和高度。值可以是像素、百分比、英寸、厘米等。

<img src="example.jpg" alt="example" width="300" height="200">

size 和 maxlength

size 和 maxlength 属性用于指定表单元素输入框的大小和最大长度。

<input type="text" name="firstname" size="30" maxlength="50">

DOM 长度属性

DOM 长度属性指的是元素在网页中的位置和尺寸。以下是一些常用的 DOM 长度属性。

clientWidth 和 clientHeight

clientWidth 和 clientHeight 属性用于获取元素的可见宽度和高度，不包括边框和滚动条。

var element = document.getElementById("example");
var width = element.clientWidth;
var height = element.clientHeight;

offsetWidth 和 offsetHeight

offsetWidth 和 offsetHeight 属性用于获取元素的完整宽度和高度，包括边框和滚动条。

var element = document.getElementById("example");
var width = element.offsetWidth;
var height = element.offsetHeight;

scrollWidth 和 scrollHeight

scrollWidth 和 scrollHeight 属性用于获取元素的实际内容宽度和高度，不包括边框。

var element = document.getElementById("example");
var width = element.scrollWidth;
var height = element.scrollHeight;

scrollTop 和 scrollLeft

scrollTop 和 scrollLeft 属性用于获取或设置元素的竖直和水平滚动条位置。

var element = document.getElementById("example");
var scrollTop = element.scrollTop;
var scrollLeft = element.scrollLeft;