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

Try something like this:

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

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

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

Answer 3

The style property of the div holds properties than you described. You can access each style property, like background-image, by accessing it's camelCased property. For example: style.backgroundImage.

Then check the string for the content between the url(" and ") characters.

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

Check out the documentation for getComputedStyle:

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