【JavaScriptの基本】要素のスタイルの取得・設定・削除

HTMLで要素にスタイルを付与する場合、styleタグを用いたり要素ごとにstyle属性を設定します。
JavaScriptからは、要素に対してスタイルを取得したり設定を行うことができます。

今回は、要素のスタイリングを行うプロパティやメソッドについて解説していきます。

要素のスタイリング方法

要素にスタイルを付与するには、HTMLとは別で作成したCSSファイル上で設定する方法が一般的ですが、HTML側でスタイルの設定を行うこともできます。

2024.08.01

2024.08.14

自分でWebサイトを作ってみたいと思ったことはありませんか？そのWebサイトの基礎となるのが「HTML」です。 HTMLを学ぶことで、オリジナルのWebページを作成できるようになります。本稿では、HTMLの基礎知識と基本構造を初心者の方にもわかりやすく解説します。 HTMLと...

HTMLでスタイリングを行う場合には、次の2つの方法が使われます。

styleタグの用意：例　<style></style>
style属性の設定：例　<div style=""></div>

例えば、「Hello!」というテキストの色を赤色にしたい場合、2通りのパターンで書くことができます。

styleタグ：

<head>
  <style> h1 { color: red; } </style>
</head>
<body>
  <h1>Hello!</h1>
</body>

style属性：

<body>
  <h1 style="color: red;">Hello!</h1>
</body>

ブラウザではどちらも同じ表示です。

style_1

スタイルの設定

styleプロパティを使うと、要素のスタイルを設定することができます。
element.styleに続けて、プロパティ名と付与したい実際の値を記述します。

element.style.プロパティ名 = 'value';

この方法は、要素に対してstyle属性にスタイルを設定する場合と同じです。
例えば、element.style.width="540px"は、<div style="width:540px">と同等に機能します。

多くのプロパティ名は、CSSプロパティ名と同じように使用できますが、一部例外もあります。

// CSSプロパティと同じ
element.style.color // color
element.style.height // height

// CSSプロパティと異なる
element.style.backgroundColor // background-color
element.style.fontSize // font-size
element.style.cssFloat // float

CSSプロパティ名がbackground-colorのように複数語で形成されているものは、キャメルケースが使われます。

次の例を見てください。

<div>
  <h2>Hello!</h2>
  <p>Welcome to my website.</p>
<div>
  
<script>
  let element = document.querySelector('div');
  element.style.border = '1px solid blue';
  element.style.width = '540px';
</script>

style_2

ブラウザで確認してみると、<div>のstyle属性にスタイルが追加されていることが分かります。

スタイルの削除

スタイルを削除したい場合、値にnullを代入します。

element.style.プロパティ名 = null;

<div>に付与している枠線のスタイルを削除するには、このように書くことができます。

<div style="border: 1px solid blue;">
  <h2>Hello!</h2>
  <p>Welcome to my website.</p>
<div>
  
<script>
  let element = document.querySelector('div');
  element.style.border = null;
</script>

style_3

この時、スタイルを削除できるのはstyle属性で設定されているプロパティです。styleタグで設定されているプロパティに対しては削除できません。

また、時々スタイルを隠したいような場面もあるかもしれません。
スタイルを含む要素そのものを隠すには、styleプロパティに対してdisplay = 'none'を記述します。

element.style.display = 'none';

例えば、ボタンがクリックされたら要素を隠したいような場面で活用できます。

<div>
  <h2>Hello!</h2>
  <p>Welcome to my website.</p>
  <p style="color: blue;">Is it your first time to visit?</p>
<div>
<button onClick="hideElement();">要素を隠す</button>

<script>
  function hideElement() {
    let element = document.getElementById('message');
    element.style.display = 'none';
  }
</script>

クリック前：
style_4

クリック後：
style_5

element.style.display = 'none'は、<p style="display:none">と同じ機能を持ちます。
そのため、実質的にはスタイルを削除した訳ではなく、一時的に要素を非表示にするイメージです。

スタイルの取得

styleプロパティは、style属性のスタイルに対して設定や削除などをかんたんに行うことができますが、styleタグで用意されたスタイルを操作することはできません。

<head>
  <style> h2 { color: red; } </style>
</head>
<body>
  <h2>Hello!</h2>
  <p>Welcome to my website.</p>
    
  <script>
    let h2 = document.querySelector('h2');
    let p = document.querySelector('p');
    p.style.color = 'blue';

    console.log(h2.style.color); // 読み込めない
    console.log(p.style.color); // "blue"
  </script>
</body>

しかし、styleタグで用意したスタイルを後から変更する際に、現在の値を調べたいという場面があるかもしれません。
そのような場合、getComputedStyleメソッドが使用できます。

let getStyle = getComputedStyle(element);

戻り値は、CSSStyleDeclarationオブジェクトと呼ばれるスタイルが格納されたオブジェクトです。

そこから特定のスタイルの値を取得するために、返ってきたオブジェクトに対してアクセスしたいプロパティ名を記述します。

// 例
let getStyle = getComputedStyle(element);
getStyle.color; // フォントカラーを取得
getStyle.width; // 横幅を取得

次の例を見てください。

<head>
  <style>
    body { 
      color: blue; 
      margin: 5px;
    } 
  </style>
</head>
<body>
    
  <script>
    let getStyle = getComputedStyle(document.body);

    console.log(getStyle.color); // "rgb(0, 0, 255)"
    console.log(getStyle.marginBottom); // "5px"
  </script>
</body>

<style>内に用意した<body>に対するスタイルを取得しています。
コンソールでは、フォントの色と下の余白に関する値が確認できます。

まとめ

今回は、要素のスタイルの取得・設定・削除方法について解説しました。

// ポイント
* element.style.プロパティ名 = 'value'：スタイルの設定
* element.style.プロパティ名 = null：スタイルの削除
* element.style.display = 'none'：要素の非表示
* getComputedStyle(element)：スタイルの取得

DOM操作では、要素のスタイルに対して変更を行う場面が良くあります。ぜひ参考にしてください。