Published on

valina javascriptで複数のcssを指定する方法

Authors
  • avatar
    Name
    ssu
    Twitter

javascriptだけで複数のcss要素を指定するにはどうしたらよいかを紹介します。 jQueryだと.cssを使って複数のcssを設定できますが、素のjavascript(=バニラjs)だと そうはいきません。

ただ、cssの指定の仕方は簡単で、例えば、.buttonというクラスがあれば、 下記のようにstyle.cssTextにcssのstyleを文字列として代入してあげればできます。

document.querySelector(".button").style.cssText = "background: orange; padding: 20px; box-shadow: 1px 1px lightgrey"

es6ではこのように記載もできます。

document.querySelector(".button").style.cssText = ` background: orange; padding: 20px; box-shadow: 1px 1px lightgrey `

例えば、全体のhtmlが下記の場合には図のようなテキストだけしか表示されませんが

<html> <div class="button">ボタン</div> </html>

jsを入れるとこのようになります。

<html> <div class="button">ボタン</div> <script> document.querySelector(".button").style.cssText = ` background: orange; padding: 20px; box-shadow: 1px 1px lightgrey ` </script> </html>

参考: How can I set multiple CSS styles in JavaScript?