在前端开发中，我们有时需要获取某个元素的背景图片 URL，其中最常见的情况就是
元素。本文将介绍如何使用 JavaScript 获取
元素的背景图片 URL。
方法一：使用 getComputedStyle 函数
getComputedStyle 函数可以获取指定元素的所有计算样式（包括 CSS 样式和通过 JavaScript 动态添加的样式），其中 background-image 样式对应的值即为背景图片的 URL。
示例代码：
----- --- - --------------------------------- ----- ----- - ----------------------------- ----- -------- - ------------------------------------------- ----------------------
上述代码首先获取 id 为 "myDiv" 的
元素，然后使用
window.getComputedStyle 函数获取该元素的计算样式，并将其赋值给 style 变量。最后，使用 getPropertyValue 方法获取 background-image 样式对应的值，并将其打印出来。
需要注意的是，在获取背景图片 URL 时，getPropertyValue 返回的字符串可能包含引号（例如 "url('https://example.com/image.jpg')"），因此需要根据实际情况进行处理。
方法二：使用 element.style 属性
如果背景图片是通过内联样式或者 JavaScript 动态添加的，则可以使用 element.style 属性获取其样式值。
示例代码：
---- ---------- ------------------------ --------------------------------------------- -------- ----- --- - --------------------------------- ----- -------- - -------------------------- ---------------------- ---------
上述代码中，
元素通过内联样式设置了背景图片。在 JavaScript 中，可以使用
element.style 属性获取元素的内联样式，并从中获取 background-image 样式对应的值。
需要注意的是，如果背景图片是通过 CSS 类或者外部样式表设置的，则无法使用 element.style 属性获取其值。
总结
本文介绍了两种获取
元素背景图片 URL 的方法：使用 getComputedStyle 函数和使用 element.style 属性。需要根据实际情况选择合适的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27334