DOM 使用 querySelector() 操作

Question

我想在 div

中选择 style 的 url 值

<div 
class="w-18 h-18 sm:w-20 sm:h-20 bg-gray-200 mx-auto bg-center bg-cover border border-gray-400 rounded-ch" 
style="background-image: URL('https://d14u0p1qkech25.cloudfront.net/club_8702_65d827dd-03b9-4cce-8876-8bd33f306460_thumbnail_250x250')"
></div>

我能够通过

获得div

document.querySelector('rounded-ca')

然后我在 div 上使用 .style 属性来选择 style 但它只返回这样的 object

{ "0": "background-image" }

我怎样才能获得分配给 background-image 的 url 值？

Answer 1

尝试这样的事情：

div = document.getElementsByClassName("rounded-ch")[0]
style = div.getAttribute("style")
link = style.replace("URL('", "").slice(0, -2)
console.log(link)

<div 
class="w-18 h-18 sm:w-20 sm:h-20 bg-gray-200 mx-auto bg-center bg-cover border border-gray-400 rounded-ch" 
style="background-image: URL('https://d14u0p1qkech25.cloudfront.net/club_8702_65d827dd-03b9-4cce-8876-8bd33f306460_thumbnail_250x250')"
></div>

Answer 2

我在选择的 document 上使用 .getAttribute() 属性来获得这样的样式属性

document.querySelector('rounded-ca').getAttribute('style')

Answer 3

div 的 style 属性拥有比您描述的更多的属性。您可以访问每个样式属性，例如 background-image，方法是访问它的驼峰式属性。例如：style.backgroundImage.

然后检查字符串中 url(" 和 ") 字符之间的内容。

const div = document.querySelector('.rounded-ch');
const { backgroundImage } = div.style;
const pattern = /(?<=url\(").*(?="\))/g;
const [url] = backgroundImage.match(pattern);
console.log(url);

<div 
class="w-18 h-18 sm:w-20 sm:h-20 bg-gray-200 mx-auto bg-center bg-cover border border-gray-400 rounded-ch" 
style="background-image: URL('https://d14u0p1qkech25.cloudfront.net/club_8702_65d827dd-03b9-4cce-8876-8bd33f306460_thumbnail_250x250')"
></div>

Answer 4

查看 getComputedStyle 的文档：

let element = document.querySelector('rounded-ca');
let compStyles = window.getComputedStyle(element);
console.log(compStyles.getPropertyValue('background-image'));

DOM 使用 querySelector() 操作

DOM manipulation with querySelector()

html

javascript

css

dom-manipulation

queryselector