本記事では、JavaScriptでcssプロパティの値を取得・追加・変更する方法について分かりやすく解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
cssプロパティの操作
後輩ちゃん先輩！JavaScriptでcssプロパティの操作方法を教えてください！
先輩くん了解！cssプロパティの値を取得・追加・変更する方法を別々に紹介するね！
サンプルコード
先輩くん以降の解説で使用しているサンプルコードを載せました。手を動かしながら確認したい方はこちらをお使いください！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<p id="text" style="color: red">スタイルを変更していくよ！</p>
<script src="index.js"></script>
</body>
</html>
cssプロパティの値を取得
cssプロパティの値を取得するには、getComputedStyle()メソッドを使います。基本的な使い方は以下のとおりです。
/* ①対象の要素を取得 */
const sampleElem = document.getElementById('sampleElem');
/* ②getComputedStyleの引数に①で取得した要素を指定 */
const styleObj = window.getComputedStyle(sampleElem);
/* ③取得したいプロパティを指定 */
console.log(style.color);cssプロパティの値を取得するサンプルコードを用意したので、動作確認してみましょう！
<p id="text" style="color: red">スタイルを変更していくよ！</p>const textElem = document.getElementById("text");
const styleObj = window.getComputedStyle(textElem);
console.log(styleObj.color); // rgb(255, 0, 0)cssプロパティの追加・変更
先輩くんcssプロパティの追加・変更は記述方法が同じだからまとめて紹介するね！
cssプロパティの追加・変更は、以下のように記述します。
/* ①対象の要素を取得 */
const sampleElem = document.getElementById('sampleElem');
/* ②要素の追加・変更 */
sampleElem.style.プロパティ名 = "値";
/* ②-① 一括指定する場合 */
sampleElem.style.cssText = "プロパティ名: 値; プロパティ名: 値;";- ②の指定方法ではハイフン(-)が付くプロパティはキャメルケースで記述します。(例)：font-size → fontSize
- ②-①の一括指定では、ハイフン(-)が付くプロパティもそのまま記述します。
先輩くんcssプロパティの追加・変更するサンプルコードを用意したので、動作確認してみましょう！
<p id="text" style="color: red;">スタイルを変更していくよ！</p>const textElem = document.getElementById("text");
/* 追加 */
textElem.style.fontSize = "20px";
console.log(textElem); // <p id="text" style="font-size: 20px;">スタイルを変更していくよ！</p>
/* 変更 */
textElem.style.color = "#000";
console.log(textElem); // <p id="text" style="color: rgb(0, 0, 0); font-size: 20px;">スタイルを変更していくよ！</p>
