2

I am trying to add script to a web page that is generated as part of a go-daddy web site.

The image is presented in a div as a background image that was set using the style attribute.

style="background-image: url("//img1.wsimg.com/isteam/ip/c77f0810-0ea1-4425-b963-0e5820c70a3f/5a18a70f-82dc-45b6-bfb8-8f8e7ff1c875.jpg/:/cr=t:0%25,l:0%25,w:100%25,h:100%25/rs=w:1400,h:400,cg:true,m/cr=w:1400,h:400,ax:c,ay:c");"

The id of the div container is generated automatically and changes between runs.

Is there anyway I can find the elements on the page that have a background image set in the HTML style attribute using plain javascript ?

  • https://stackoverflow.com/questions/8426882/css-selector-by-inline-style-attribute might send you in the right direction. – Justin Ryan May 06 '18 at 11:09
  • Possible duplicate of [CSS selector by inline style attribute](https://stackoverflow.com/questions/8426882/css-selector-by-inline-style-attribute) – Asons May 06 '18 at 11:28
  • This question is not the same @LGSon That post was about css and this is about javascript – Savandy May 06 '18 at 11:51
  • @Savandy No, but the answer is, hence also being a duplicate. – Asons May 06 '18 at 11:51
  • @LGSon I don't get you, could you explain? – Savandy May 06 '18 at 11:57
  • @Savandy For a question to be a duplicate, it doesn't have to be the same question. If a given answer can be applied to 2 different question, they are as well duplicates. – Asons May 06 '18 at 11:59
  • @LGSon But what does the other answer has to do with this question anyway? I don't get your point – Savandy May 06 '18 at 12:01
  • This question can be solved with the duplicates answer, where one use the attribute selector to find an element, hence it is a duplicate. – Asons May 06 '18 at 12:02
  • Guys: @Savandys answer is helping me solve my problem. The refered answer does not display a javascript solution, it debates css selectors. I can make sense of Savandys answer and it helps me. –  May 06 '18 at 12:07
  • Could you mark it? – Savandy May 06 '18 at 12:19
  • @JulianPollak You just do like this with the dupe's answer: `var bkgimg = document.querySelector('[style*="img1.wsimg"]');` ... I do not recommend to choose the given answer and loop all elements like that. – Asons May 06 '18 at 12:20
  • @LGSon Thanks, I will check this option - please note that the refered css answer advises that this solution needs to know the exact bytes where as Savandy's answer even thought it is less efficiant is not dependant on the internal string. –  May 06 '18 at 12:34
  • @JulianPollak If you read up on what I suggested, you will find it is even better than looping, and does not need to know the exact bytes – Asons May 06 '18 at 12:38
  • @LGSon I tried what you proposed and can not get it to work. The query returns empty. I appreciate your effort. Thanks –  May 06 '18 at 12:54

1 Answers1

0

Try this:

var elements = document.body.getElementsByTagName("*")

for (var i = 0 ; i < elements.length ; i++) {
 if (elements[i].style.backgroundImage) {
    // DO SOMETHING HERE
    alert(elements[i].id + " has background image")
 }
}

https://jsfiddle.net/ckrm2eLL

Savandy
  • 363
  • 1
  • 3
  • 14
  • 1
    I have checked this answer and it answers the question. Unfortunatly some how go-daddy does not let this code execute as expected :-( . Thank you @Savandy. I don't think that your answer should have been down voted. Once i get a few more points I will upvote it –  May 06 '18 at 12:27