使用Java脚本更改背景图像CSS

Question

I have a Wordpress site with a background in the header inside of a class.

I'm tring to write a bit of JS to change this background image depending on a hashtag. The Hashtag script is working but the change BG bit isn't - please help... :-(

The script I've writen is:

  document.getElementsByClassName("eut-bg-image").style.backgroundImage = "url(https://boutiqueballer.com/wp/wp-content/uploads/2017/10/chanel.jpg)";
})();

Answer 1

getElementsByClassName yields a collection of elements. The individual elements in the collection have the style property, not the collection itself. If you are targeting just one element, you can access it by index:

document.getElementsByClassName('eut-bg-image')[0].style.backgroundImage = ...;

If you are targeting several elements, you may iterate over them:

var elements = document.getElementsByClassName('eut-bg-image');
for(var i = 0; i < elements.length; i++)
   elements[i].style.backgroundImage = ...;

Alternatively, you may use document.querySelector , depending on which level of browser compatibility you need. You can then distinguish between document.querySelectorAll if you want a collection, or docment.querySelector if you want only the first match. Accepts a CSS selector:

document.querySelector('.eut-bg-image').style.backgroundImage = ...;