JavaScript中获取高度和宽度函数总结

下面是详细讲解“JavaScript中获取高度和宽度函数总结”的完整攻略：

下面是详细讲解“JavaScript中获取高度和宽度函数总结”的完整攻略：

获取元素的高度和宽度

获取元素的高度和宽度有多种方式，下面将介绍常用的四种方法。

1. offsetWidth 和 offsetHeight 属性

元素的 offsetWidth 和 offsetHeight 属性可以分别获取元素的宽度和高度，包括内边距、边框和滚动条（如果有）。

let ele = document.getElementById('myDiv');
let width = ele.offsetWidth;
let height = ele.offsetHeight;

2. clientWidth 和 clientHeight 属性

元素的 clientWidth 和 clientHeight 属性可以分别获取元素的可视宽度和高度，不包括滚动条的宽度和高度，但包括内边距的宽度和高度。

let ele = document.getElementById('myDiv');
let width = ele.clientWidth;
let height = ele.clientHeight;

3. scrollWidth 和 scrollHeight 属性

元素的 scrollWidth 和 scrollHeight 属性可以分别获取元素的滚动宽度和高度，即包括所有内容的宽度和高度，无论是否可见。

let ele = document.getElementById('myDiv');
let width = ele.scrollWidth;
let height = ele.scrollHeight;

4. getBoundingClientRect() 方法

getBoundingClientRect() 方法可以获取元素的大小及其相对于视口的位置。

let ele = document.getElementById('myDiv');
let rect = ele.getBoundingClientRect();
let width = rect.width;
let height = rect.height;

示例

下面分别给出两个示例说明这四种方法的使用。

示例一：获取图片的尺寸

HTML 代码：

<img src="path/to/image.jpg" id="myImg">

JavaScript 代码：

let img = document.getElementById('myImg');
let width = img.offsetWidth;
let height = img.offsetHeight;
console.log(`图片的宽度为${width}，高度为${height}`);

示例二：获取文本区域的大小

HTML 代码：

<textarea id="myTextarea">这是一段示例文本。</textarea>

CSS 代码：

#myTextarea {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 1px solid #ccc;
}

JavaScript 代码：

let textarea = document.getElementById('myTextarea');
let width = textarea.clientWidth;
let height = textarea.clientHeight;
console.log(`文本区域的可视宽度为${width}，可视高度为${height}`);

以上就是“JavaScript中获取高度和宽度函数总结”的完整攻略。希望能帮助到您。