どうも、チャーさんです。
あなたはjavascriptでcssを操作したい。
そう思っていませんか？
この記事では、javascriptを使って、
cssを操作する方法を書いています。
なので、あなたがこの記事を読めば、
javascriptでのcss操作ができるようになるでしょう。
ということで、あなたが、
javascriptでcssを操りたいなら、
このままスクロールして読んでみてください。
スポンサードサーチ
javascriptでcssを操作する手順
はい、ということでまずは結論からです。
javascriptでcssを操作するには、
以下の手順で行います。
- 要素を取得
- 取得した要素に.style.でcssを指定する
以上でできます。
ということでそれぞれ詳しくみていきます。
まず要素を取得する
まずはjavascriptでcssを操作したい、
要素を取得します。
というのもjavascriptを使って、
cssを操作するには、まずその対象となる、
要素を取得する必要があるからです。
例えば、h1タグで囲んだ文字列の色を、
赤色にしたい場合などは、
以下のように記述して、要素を取得します。
html
<h1>文字列</h1>
javascript
<script>
var text = document.querySelector(‘h1’);
</script>
上記のように記述することで、
h1で囲った文字列というテキストの、
cssを自由に操作することができるようになります。
取得した要素にcssを指定する
で、手順に戻りますが、
要素を取得しただけでは、cssは
何も変わりません。
次に取得した要素に、
cssを指定してやる必要があります。
で取得した要素にcssを取得するには、
要素.style.cssの種類=’cssの値’;
というような書き方をします。
これだけではわかりにくいので、
例を出しますと、先ほど変数(var text)に格納した、
h1タグの文字列というテキストを赤色にしたい場合、
text.style.color=’red’;
とすることで、h1タグで囲った文字列という、
文字が赤色に変わります。
このように。
ビフォー
アフター
というように、javascriptで、
cssを操作するには、cssを操作したい、
要素をまず取得する。
次に取得した要素にcssを適用する、
という手順になります。
またcssは先ほど例で紹介した、
文字色のcolorだけでなく、
背景色など色々操作できます。
例
text.style.backgroundColor =’red’;
上記をかくと背景色が赤色になる。
基本.style.のようにドットでつなげばいいので、
あなたがcssをある程度知っていれば、
すぐに慣れることが可能です。
スポンサードサーチ
javascriptでcssを動的に変化させる
とはいえ、こんなめんどくさい手順踏まなくても、
cssでクラスで色つけたら早いのに。。
とあなたは思ったかもしれません。
もちろん単純にcssを適用するだけなら、
そうです。
しかし、javascriptでは、
これに合わせて動的にcssを操作したり、
変化させることが可能です。
動的というのは例えば、ボタンをクリックしたら、
色が動的に変わるなどで、こちらは、
javascriptの出番です。
その場合も、この記事で、紹介した、
cssを操作するための手順を使用することに、
なりますので動的に変化させたり操作したい。
あなたにそういう願望があるなら、
覚えておいて損はないですよ。
ちなみに参考までに、javascriptで、
ボタンをクリックしたら色が変わる、
という方法も記事にしておいたので、
javascriptで動的に変化させたり操作したい、
そんな場合は、読んでみてください。
スポンサードサーチ
まとめ
それではまとめに入ります。
javascriptでcssを操作するには、
以下の手順です。
要素を取得
取得した要素に.style.でcssを指定する
上記をすれば、javascriptで、
cssを操作できます。
ということで、これであなたは、
javascriptでのcss操作の仕方がわかったと、
思いますので、早速あなたのpc上で実践してみましょう。
するとあなたのjavascriptのスキルが、
アップして、プログラミングの仕事獲得などに、
役に立っていきますよ。
ということで、以上で、
javascriptでのcss操作の記事を終わります。
それでは、読んでもらってありがとうございました。
チャーさん
