How to get the background url of the image using the javascript or selenium

Question

I'm trying to get the background url of the image. below is the code from the webpage

<style type="text/css">
	            .great-banner.live-banner { 
	            background-image:
	                url("urloftheimage");
	            }
            </style>
			<div class="great-banner live-banner">
			</div>

I tried using

document.getElementsByClassName(".great-banner.live-banner").style.backgroundimage

window.getComputedStyle(document.getElementsByClassName(".great-banner.live-banner"),false); but both of these didn't work form me

I also tried

window.getComputedStyle(document.getElementsByClassName('.great-banner.live-banner')[0], null).getPropertyValue('background-image').split(/'|"/)[1]; and i'm getting the below error

Error: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Can you please help me how to get the background image URL

Try using style.backgroundImage (note the capital i in image) — user2417483
– user2417483, Commented Sep 17, 2017 at 21:19
I tried it and got this error Uncaught TypeError: Cannot read property 'backgroundImage' of undefined — Siva
– Siva, Commented Sep 17, 2017 at 21:21

Hugo Silva · Accepted Answer · 2017-09-17 21:29:23Z

1

First of all document.getElementsByClassName will return a collection of elements, so there is no style property. - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

Secondly, the argument you pass to the function should be a class name, not a css selector. Maybe you are looking for querySelectorAll - https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Try document.querySelectorAll(".great-banner.live-banner")[0].style.backgroundImage instead

answered Sep 17, 2017 at 21:29

Hugo Silva

6,9863 gold badges29 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Siva · Accepted Answer · 2017-09-18 11:00:45Z

0

I found the solution:

window.document.defaultView.getComputedStyle(document.getElementsByClassName('great-banner live-banner')[0], null).getPropertyValue('background-image').split(/'|\"/)[1]; in java script. It will return the URL.

While using in selenium:

JavascriptExecutor jsExec = (JavascriptExecutor) driver; jsExec.executeScript("return window.document.defaultView.getComputedStyle(document.getElementsByClassName('great-banner live-banner')[0], null).getPropertyValue('background-image').split(/'|\"/)[1];"));

Add 'return' in the script as per the above line while using in selenium otherwise, it will provide null value

answered Sep 18, 2017 at 11:00

Siva

1,2185 gold badges21 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to get the background url of the image using the javascript or selenium

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related