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?
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>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>Check out the documentation for getComputedStyle:
let element = document.querySelector('rounded-ca');
let compStyles = window.getComputedStyle(element);
console.log(compStyles.getPropertyValue('background-image'));