DOM manipulation with querySelector()

Question

I want to pick the url value of the style in this div

<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>

I was able to get the div with

document.querySelector('rounded-ca')

Then I used the .style property on the div to pick the style but it's only returning an object like this

{ "0": "background-image" }

How can I then get the url value assigned to background-image?

Answer 1

I used the .getAttribute() property on the picked document to get the style attribute like this

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