HTMLの「style」プロパティにJavaScriptでstyleを設定する

はじめに

この1つ前に投稿した複数の背景画像をCSSで設置すると少し関係します。

背景画像を分割したいという相談を受けました。かつ、JavaScriptで実装する必要があるとの事でした。
そんなわけでサンプルとして実装してみました。

備忘を兼ねて投稿します。

実装

利用するもの

HTMLElement.styleプロパティを利用します。
これはHTMLで、インラインでstyle属性を指定したのと同じ状態になります。

ポイントと注意事項

基本的には、element.style.backgroundImage='***'の用に、style部分をテキストで指定すればOKです。(elementはstyleを設定したいHTMLElement)

注意事項としては、

• styleにつづくstyle属性をキャメルケースで指定する
• styleに直接文字列を代入せずelement.style.backgroundImageとstyle名を指定する必要がある

というところです。

表示されない時のチェック事項

• style属性をキャメルケースでしていしているか
• style属性の値が正しい書き方（文字列）になっているか

実装例

See the Pen Multiple_background_settings by H.N (@H_Naito) on CodePen.

参考

HTMLElement.style