本文旨在指导开发者如何使用 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 属性中提取 URLconst 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);};
代码解释：
获取元素和样式： 首先，使用 document.querySelector 获取目标元素，并使用 window.getComputedStyle 获取其计算样式。提取 URL： 从 background-image 属性中提取 URL。backgroundImage.match(/url([“‘]?([^”‘]*)[“‘]?)/)[1] 使用正则表达式匹配 URL，并提取 URL 的值。加载图片： 创建一个新的 Image 对象，并将 URL 设置为 src 属性。获取尺寸： onload 事件处理程序在图片加载完成后执行。在该处理程序中，我们可以访问 this.width 和 this.height 属性，它们分别表示图片的原始宽度和高度。
注意事项：
由于图片加载是异步的，因此必须在 onload 事件处理程序中访问图片的尺寸。确保 URL 是有效的，并且图片可以被成功加载。如果元素没有设置 background-image 属性，backgroundImage 变量的值将为 “none”，此时 imageUrl 变量将为 null，需要进行相应的错误处理。
总结
通过结合 window.getComputedStyle 和 JavaScript 的 Image 对象，我们可以有效地获取 HTML 元素的背景图片的尺寸，即使 background-size 属性设置为默认的 “auto” 值。这种方法可以应用于各种 Web 开发场景，例如 Selenium 测试，动态布局调整等。在实际应用中，需要注意处理图片加载的异步性以及可能出现的错误情况，以确保代码的健壮性和可靠性。
以上就是获取元素背景图片的尺寸：JavaScript 教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520721.html
微信扫一扫 
支付宝扫一扫 
