プログラミング

【JavaScript】【ES6】CSSを動的に変更する方法!

あきぞらです。

CSSをJavaScriptで動的に変更したいとき、ありますよね。

JQueryでないES2015などでの書き方を知りたいときに「あれ?」となったので今日はその方法を紹介していきます。

JavaScriptで動的にCSSを変更する

たとえば、こんなHTMLがあったとします。

<div class='test-msg-box'>
     テスト
</div>

これのstyleをいじってみます。

このdivを「display: none」にしたいときは、このようにかきます。

const testMsgBox = document.querySelector('.test-msg-box')
      testMsgBox.style.display = 'block'

JQueryに比べると、若干めんどうですよね。

ただ、Vue.jsなどを利用しているとあまり使うことがないかもしれません。

ですが、使うときに「あれ?」とならないように覚えておくとよいと思います!

-プログラミング
-,

Copyright© あきぞらてっく , 2020 All Rights Reserved Powered by AFFINGER5.