JavaScriptを使って背景画像CSSを変更する

Question

私は、Wordpressサイトをクラス内のヘッダにバックグラウンドで持っています。

私はハッシュタグに応じてこの背景イメージを変更するJSのビットを書き留めています。ハッシュタグのスクリプトが機能していますが、変更BGビットではありません - 助けてください... :-(

私が書かれてきたスクリプトは次のとおりです。

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

Answer 1

getElementsByClassNameは、要素のコレクションを生成する個々の。コレクション内の要素はstyle財産ではなく、コレクション自体を持ってあなただけの一つの要素をターゲットにしている場合は、あなたがインデックスによってそれにアクセスすることができます。

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

あなたはいくつかの要素をターゲットにしている場合は、あなたがそれらを反復処理することがあります。

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

また、必要なブラウザ互換性のレベルによっては、document.querySelectorを使用することもできます。コレクションが必要な場合はdocument.querySelectorAll、最初に一致する場合はdocment.querySelectorを区別できます。 CSSセレクタを受け入れる：

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