使用 jQuery 获取 HTML 节点的背景图地址非常简单。假设你有一个 HTML 元素,其背景图通过 `style` 属性或 CSS 设置,你可以通过以下方式获取背景图的 URL。
### 示例 HTML
```html
<div id="myElement" style="background-image: url('https://example.com/image.jpg');"></div>
```
### 使用 jQuery 获取背景图地址
```javascript
// 获取背景图地址
var backgroundImageUrl = $('#myElement').css('background-image');
// 去掉 "url('" 和 "')" 部分,只保留图片地址
backgroundImageUrl = backgroundImageUrl.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '');
console.log(backgroundImageUrl); // 输出: https://example.com/image.jpg
```
### 解释
1. **`$('#myElement').css('background-image')`**:
- 获取 `#myElement` 的 `background-image` 样式值。
- 返回的格式通常是 `url('https://example.com/image.jpg')`。
2. **`replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '')`**:
- 使用正则表达式去掉 `url(` 和 `)`,以及可能的引号(`'` 或 `"`)。
- 最终只保留图片地址。
### 如果背景图是通过 CSS 类设置的
如果背景图是通过 CSS 类设置的,比如:
```html
<style>
.bg-image {
background-image: url('https://example.com/image.jpg');
}
</style>
<div id="myElement" class="bg-image"></div>
```
同样的 jQuery 代码仍然适用:
```javascript
var backgroundImageUrl = $('#myElement').css('background-image');
backgroundImageUrl = backgroundImageUrl.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '');
console.log(backgroundImageUrl); // 输出: https://example.com/image.jpg
```
### 注意事项
- 如果元素没有设置背景图,`$('#myElement').css('background-image')` 会返回 `none`。
- 如果有多个背景图(如 CSS3 支持的多背景),`background-image` 会返回一个逗号分隔的列表,需要进一步处理。
### 示例:处理多个背景图
```javascript
var backgroundImages = $('#myElement').css('background-image');
var imageUrls = backgroundImages.split(',').map(function(url) {
return url.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, '').trim();
});
console.log(imageUrls); // 输出: ["https://example.com/image1.jpg", "https://example.com/image2.jpg"]
```
### 总结
- 使用 `$('#myElement').css('background-image')` 获取背景图样式。
- 使用正则表达式清理多余的字符,提取纯 URL。
- 适用于内联样式和外部 CSS 设置的背景图。