JavaScript復習

こんにちは！
後期の授業から、JavaScriptについて本格的な勉強が始まりました。今回は復習ということで、要素を指定してCSSの操作をするということをやっていきたいと思います！

要素の指定

<body>
  <p id="text">本文</p>
</body>

上記のように”text”というidが付いたp要素があります。今回はこのp要素のCSSを色々と変更してみたいと思います！

要素を指定する方法について、授業では”getElementsBy〜”という書き方を教えてもらいました。
getElementsByTagName(‘要素名’);
getElementById(‘id名’);
getElementsByClassName(‘class名’);
などの書き方があり、それぞれid名で取得するのかclass名で取得するのかが変わります。そして、サイトの内容全体のことを指す”document.”に続く形で記入して、一旦コンソールに表示させてみます。

<script>
  console.log( document.getElementById('text') );
</script>

そうすると、このようにしっかりとコンソールに表示させることができました。

CSSの操作

次にCSSの操作をやっていきます。

現状はこのように表示されてます。
“.style”と書いて、それに続いてドットで繋いでプロパティを書いていきます。例えば、文字の大きさを変更したいときは、

<script>
  document.getElementById('text').style.fontSize = '30px';
</script>

このように書きます。
この時、CSSで書く感覚で”font-size”とは書かずに、キャメルケースで書かないといけないので注意が必要です。（単語の途中でハイフンは使えないそうです。）

この要領で文字の色と背景色も変更していきます。

<script>
  document.getElementById('text').style.color = '#ff0000';
  document.getElementById('text').style.backgroundColor = '#87ceeb';
</script>

こんな感じで書きました。どのように表示されているかというと、

このようになっています。しっかりと文字のサイズが30px、文字の色が#ff0000、背景色が#87ceebに変更されています。

もう少しだけ変更を加えていきたいと思います。

<script>
  document.getElementById('text').style.padding = '20px';
  document.getElementById('text').style.border = '5px solid #ff8c00';
  document.getElementById('text').style.fontWeight = 'bold';
  document.getElementById('text').style.textAlign = 'center';
</script>