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

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?