HTMLElement: style プロパティ

値

動的な CSSStyleProperties オブジェクトです。

style プロパティ自体は、CSSStyleProperties オブジェクトを置き換えることができないという意味で読み取り専用ですが、style プロパティに直接値を代入することは可能です。これは、その cssText プロパティに値を代入することと同等です。同時に、setProperty() および removeProperty() メソッドを使用して、CSSStyleProperties オブジェクトを変更することもできます。

解説

要素の style 属性で設定されたインラインスタイルの値は、返される CSSStyleProperties オブジェクトの対応するプロパティに反映されます。

要素の一括指定プロパティは、対応する個別指定プロパティに展開されます。 例えば、スタイルが "border-top: 1px solid black" である要素は、返されるオブジェクト内で、名前が border-top のプロパティおよび borderTop、および対応する個別指定プロパティ border-top-color および borderTopColor、 border-top-style および borderTopStyle、border-top-width および borderTopWidth として表されます。

他のスタイル値を変更せずに要素に特定のスタイルを追加するには、できれば、CSSStyleProperties オブジェクトに対して個々のプロパティを設定した方がいいでしょう。 例えば、element.style.backgroundColor = "red" と記述できます。 スタイル宣言は、null または空文字列（例：element.style.color = null）に設定することでリセットされます。

style プロパティは、CSS カスケードにおいて、style 属性を通じて設定されるインラインスタイル宣言と同じ優先順位を持ちます。

例

基本的な使い方

このコード例は、要素のインラインスタイルを読み取る方法を示しています。 それぞれの場合、getPropertyValue() を使用してダッシュで区切られた名前付きのスタイルプロパティを読み取り、ドット演算子を使用してキャメルケースのプロパティを取得しています。

HTML

まず、<div> 要素と、その中に含まれた要素を定義し、それぞれに一括指定と個別指定の両方を使用して異なるインラインスタイルを指定します。

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">div の例</div>
  <pre id="log"></pre>
</div>

#log {
  height: 200px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

次のコードは、内部要素を取得し、そのスタイルを読み取り、ダッシュ名前付きおよびキャメルケース名付きの CSS スタイルプロパティをログ出力します。

const element = document.getElementById("elt");
const elementStyle = element.style;

// 個別指定スタイル
log(`"border-top" = '${elementStyle.getPropertyValue("border-top")}'`);
log(`"borderTop" = '${elementStyle.borderTop}'`);

// 展開した個別指定スタイル
log(
  `"border-top-width" = '${elementStyle.getPropertyValue("border-top-width")}'`,
);
log(`"borderTopWidth" = '${elementStyle.borderTopWidth}'`);

log(
  `"border-top-style" = '${elementStyle.getPropertyValue("border-top-style")}'`,
);
log(`"borderTopStyle" = '${elementStyle.borderTopStyle}'`);

log(
  `"border-top-color" = '${elementStyle.getPropertyValue("border-top-color")}'`,
);
log(`"borderTopColor" = '${elementStyle.borderTopColor}'`);

// 元の一括指定スタイル
log(`"color" = '${elementStyle.getPropertyValue("color")}'`);
log(`"color" = '${elementStyle.color}'`);

// 親で定義
log(`"font-weight" = '${elementStyle.getPropertyValue("font-weight")}'`);
log(`"fontWeight" = '${elementStyle.fontWeight}'`);

結果

結果は下記に示します。 それぞれの場合で、ダッシュ付きおよびキャメルケースの名前付きプロパティを使用して読み込まれたスタイルが同じであることがわかります。 同時に、要素の style 属性に対応する border-top プロパティが存在し、その各部分について個別指定プロパティが定義されていることも確認できます（border-top-color、 border-top-style、および border-top-width が定義されていることがわかります）。

なお、font-weight は CSSStyleProperties 上で定義されています（他のすべての CSS プロパティも同様ですが、ここではそれらを記載していません）。 ただし、これはネストされた要素に対するインラインスタイルではないため、その値は空文字列（""）に設定されます。

スタイル情報の列挙

この例では、CSSStyleProperties のダッシュ名付きのプロパティを列挙する方法を示しています。

HTML

まず、<div> 要素と、その中に入れ子になった要素を定義し、それぞれに一括指定と個別指定の両方のインラインスタイルを指定します。 これは前回の例と同じ HTML です。

<div style="font-weight: bold;">
  <div style="border-top: 1px solid blue; color: red;" id="elt">div の例</div>
  <pre id="log"></pre>
</div>

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

以下のコードは、CSSStyleProperties の反復可能なプロパティを反復処理し、その結果をログ出力します。

const element = document.getElementById("elt");
const elementStyle = element.style;

// すべての要素のスタイルを、 `for...in` を使用して走査
for (const prop in elementStyle) {
  // プロパティが CSSStyleDeclaration インスタンスに属しているか確認する
  // また、プロパティが（インラインスタイルを示す）数値インデックスであることを確認する
  if (
    Object.hasOwn(elementStyle, prop) &&
    !Number.isNaN(Number.parseInt(prop, 10))
  ) {
    log(
      `${
        elementStyle[prop]
      } = '${elementStyle.getPropertyValue(elementStyle[prop])}`,
    );
  }
}

結果

結果を下に示します。 なお、要素の個別指定 CSS プロパティのみが列挙値となっているので（インラインの一括指定プロパティは列挙値ではありません）、この点にご注意ください。

境界スタイルを更新

<div id="box"></div>

<button id="btn1">境界を 20px 幅にする</button>
<button id="btn2">境界を 5px 幅にする</button>

#box {
  border: 5px solid green;
  width: 100px;
  height: 100px;
}

function setBorderWidth(width) {
  document.getElementById("box").style.borderWidth = `${width}px`;
}

document.getElementById("btn1").addEventListener("click", () => {
  setBorderWidth(20);
});
document.getElementById("btn2").addEventListener("click", () => {
  setBorderWidth(5);
});

スタイルの操作

この例では、HTML の段落要素の基本的なスタイルプロパティに、その要素の style オブジェクトおよびそのオブジェクトの CSS スタイルプロパティを使用してアクセスしています。これらは DOM から取得・設定が可能です。この場合、個々のスタイルを直接操作しています。また、styleSheets とそのルールを使用して、文書全体のスタイルを変更することもできます。

<p id="pid">いくらかのテキスト</p>
<p><button type="button">テキストを変更</button></p>

function changeText() {
  const p = document.getElementById("pid");

  p.style.color = "blue";
  p.style.fontSize = "18pt";
}

document.querySelector("button").addEventListener("click", () => {
  changeText();
});

仕様書

ブラウザーの互換性

関連情報

• 動的なスタイル情報の利用
• SVGElement.style
• MathMLElement.style
• HTMLElement.attributeStyleMap
• HTML の style 属性