目次
目的
- インラインの CSS を変更したい。
- 変更を足していきたい。
- 一行で一個の CSS を設定したい。
- <style> の中に書く通常の書式と少し違っても良い。
- style プロパティを使用したい。
テストしてみました。
今回変更するのは、以下 1 番のようなインラインのスタイルシートです。
- <body><div style="color:blue"></div></body>
- <head><style>div{color:blue;}</style></head>
- <head><link rel="stylesheet" href="styles.css" /></head>
上記 1,2,3 を
- インラインのスタイルシート
- 内部スタイルシート
- 外部スタイルシート
と言うようです。
サンプル
以下の URL にサンプルページを準備してみました。
- JavaScript で CSS 変更（ style プロパティ編）
- https://pulogu.net/wordpress/wp-content/uploads/2023/11/js-style-property-change.html
サンプルページ内に <div> タグを作成してあります。 id 名は「div1」になっています。
<div id="div1">id=div1</div>
背景色
背景色を変更する下記コードを実行してみました。
CSS では「background-color」と記述しますが、 style プロパティでは、「-」ハイフンが入らないようです。「-」の後の 1 文字目を大文字に変えて記述するようです。
function test1(){
let a=document.getElementById("div1"); //div タグ取得
a.style.backgroundColor="lime"; //style プロパティ変更
}
test1(); //関数実行
背景色がライムに変更されています。
この時、ページを右クリックしてソースを表示しても変化はありませんが、以下のようなコードで、動的に変更された HTML ソースを見る事が可能なようです。
let a=document.getElementById("div1");
console.log(a.outerHTML); //div1 全体をタグまで含めて文字列として取得している
上記コードの実行結果は以下のようになりました。 HTML ソースが動的に変更されているようです。
<div id="div1" style="background-color: lime;">id=div1</div>
枠線
枠線を変更する下記コードを、上記 test1() に続けて実行してみました。
function test2(){
let a=document.getElementById("div1");
a.style.borderWidth="24px";
}
test2();
枠線が太くなっています。
動的な HTML ソースは以下のようになりました。 style プロパティで変更したプロパティが足されていくようです。
<div id="div1" style="background-color: lime; border-width: 24px;">id=div1</div>
値を取得するコードも実行してみました。
let a=document.getElementById("div1");
console.log(a.style.borderWidth);
実行結果は、以下のようになりました。
24px
ブラケット記法
test1() , test2() に続けて、下記 test3() を実行してみました。
[] のブラケット記法のテストです。
function test3(aa,bb){
let a=document.getElementById("div1");
a.style[aa]=bb;
}
test3('fontSize','48px');
文字が大きなっています。
test2() までの結果と比べた方が分かりやすいですね。
テスト環境
- Mozilla Firefox 120.0 (64 ビット)
- Windows10（64 ビット）
以上、閲覧ありがとうございました。
- [ Amazon.co.jp アソシエイト ] JavaScript 関係の本
- https://amzn.to/48EoeGM
