Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8578

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

$
0
0

はじめに

この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


Viewing all articles
Browse latest Browse all 8578

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>