Quiero elegir el valor de url del style en este 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> Pude obtener el div con
document.querySelector('rounded-ca') Luego usé la propiedad .style en el div para elegir el style , pero solo devuelve un object como este
{ "0": "background-image" } ¿Cómo puedo obtener el valor de url asignado a background-image ?
Prueba algo como esto:
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>La propiedad de style del div tiene propiedades que las que describiste. Puede acceder a cada propiedad de estilo, como background-image , accediendo a su propiedad camelCased. Por ejemplo: style.backgroundImage .
Luego verifique la cadena para el contenido entre los caracteres url(" y ") .
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>Consulte la documentación de getComputedStyle :
let element = document.querySelector('rounded-ca'); let compStyles = window.getComputedStyle(element); console.log(compStyles.getPropertyValue('background-image'));