获取元素背景图片的尺寸：JavaScript 教程

本文旨在指导开发者如何使用 JavaScript 获取 HTML 元素的背景图片的宽度和高度。针对背景图片未显式设置尺寸或尺寸为默认值 “auto” 的情况，提供了一种通过获取图片 URL 并加载图片来确定其原始尺寸的解决方案。通过 window.getComputedStyle 获取元素的样式信息，再结合 JavaScript 的 Image 对象，可以有效地解决背景图片尺寸获取的问题。

在 Web 开发中，经常需要获取元素的各种样式信息，包括背景图片的尺寸。然而，直接访问元素的 style 属性可能无法获取到通过 CSS 类或外部样式表设置的样式。本文将介绍如何使用 window.getComputedStyle 获取元素的计算样式，并进一步获取背景图片的尺寸，即使 background-size 属性设置为默认的 “auto” 值。

使用 window.getComputedStyle 获取样式

window.getComputedStyle 方法允许我们获取元素最终应用的所有 CSS 属性值，包括那些通过 CSS 类或外部样式表设置的样式。这对于获取元素的背景图片信息至关重要。

以下代码展示了如何使用 window.getComputedStyle 获取元素的 height 属性：

立即学习“Java免费学习笔记（深入）”；

const element = document.getElementsByClassName('current-img white-text half-section-right main-section-desktop')[0];
const style = window.getComputedStyle(element);
const height = parseInt(style.height, 10); // 将字符串转换为整数

请注意，style.height 返回的是一个字符串，例如 “12px”。因此，需要使用 parseInt 将其转换为整数，以便进行后续计算。

获取背景图片尺寸

如果 background-size 属性没有被显式设置，或者设置为默认的 “auto” 值，那么我们需要通过获取背景图片的 URL，并加载该图片来确定其原始尺寸。

以下代码演示了如何获取背景图片的 URL，并获取其原始尺寸：

// 获取元素
const element = document.querySelector('.current-img.white-text.half-section-right.main-section-desktop');
// 获取元素的计算样式
const style = window.getComputedStyle(element);
// 获取 background-image 属性
const backgroundImage = style.getPropertyValue('background-image');
// 从 background-image 属性中提取 URL
const imageUrl = backgroundImage.match(/url\(["']?([^"']*)["']?\)/)[1];
// 创建一个 Image 对象来加载背景图片
const image = new Image();
image.src = imageUrl;
// 在图片加载完成后获取图片的原始宽度和高度
image.onload = function() {
const imageWidth = this.width;
const imageHeight = this.height;
// 使用 imageWidth 和 imageHeight
console.log('Width:', imageWidth, 'Height:', imageHeight);
};

代码解释：

1. 获取元素和样式： 首先，使用 document.querySelector 获取目标元素，并使用 window.getComputedStyle 获取其计算样式。
2. 提取 URL： 从 background-image 属性中提取 URL。backgroundImage.match(/url\([“‘]?([^”‘]*)[“‘]?\)/)[1] 使用正则表达式匹配 URL，并提取 URL 的值。
3. 加载图片： 创建一个新的 Image 对象，并将 URL 设置为 src 属性。
4. 获取尺寸： onload 事件处理程序在图片加载完成后执行。在该处理程序中，我们可以访问 this.width 和 this.height 属性，它们分别表示图片的原始宽度和高度。

注意事项：

• 由于图片加载是异步的，因此必须在 onload 事件处理程序中访问图片的尺寸。
• 确保 URL 是有效的，并且图片可以被成功加载。
• 如果元素没有设置 background-image 属性，backgroundImage 变量的值将为 “none”，此时 imageUrl 变量将为 null，需要进行相应的错误处理。

总结

通过结合 window.getComputedStyle 和 JavaScript 的 Image 对象，我们可以有效地获取 HTML 元素的背景图片的尺寸，即使 background-size 属性设置为默认的 “auto” 值。这种方法可以应用于各种 Web 开发场景，例如 Selenium 测试，动态布局调整等。在实际应用中，需要注意处理图片加载的异步性以及可能出现的错误情况，以确保代码的健壮性和可靠性。