English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML DOM style 属性

HTML DOM Element オブジェクト

style属性を設定または要素のインラインスタイルを返します。

それは以下を返します:CSSStyleDeclarationオブジェクトです。このオブジェクトは、要素のすべてのスタイル属性のリストを含み、要素のインラインスタイル属性で定義された属性に値を割り当てています。

语法:

スタイル属性を返します:

element.style.property

スタイル属性を設定します:

element.style.property = value
document.getElementById("demo").style.color = "blue";
テストしてみる‹/›

注意:style属性に文字列を割り当てることでスタイルを設定することはできません、例えば:element.style="color:blue;"。要素のスタイルを設定するには、以下のようにスタイルの後に"CSS"属性を付けて値を指定します:

element.style.backgroundColor="blue"; //要素の背景色を青色に設定します

ご覧の通り、CSS属性を設定するためのJavaScriptの语法はCSS(backgroundColorではなくbackground)-color)が少し異なります。

すべての利用可能な属性のリストについては、以下を参照してください:スタイルオブジェクトリファレンス

style属性は、要素に適用されるスタイルを完全に理解するのに役立ちません。なぜなら、それは要素のインラインスタイル属性に設定されたCSS宣言のみを表し、他の場所から来たスタイルルール(このセクションのスタイルルールなど)のCSS宣言や外部スタイルシートを表さないからです。要素のすべてのCSS属性の値を取得するには、代わりに以下を使用してください:window.getComputedStyle()

しかし、document.getElementsByTagName()を使用して<head>から<style>要素にアクセスできます:

var x = document.getElementsByTagName("style")[0]; //最初の<style>要素を取得します

注意:style属性ではなく、使用することをお勧めします:要素 .setAttribute("style", "...")方法は、style属性がstyle属性内で指定されている可能性のある他のCSS属性を覆さないためです。

ブラウザの互換性

すべてのブラウザが完全にstyle属性をサポートしています:

属性
style

属性値

説明
value指定指定属性的值。例えば、border属性に対して:
element.style.border="5px純蓝色";

技術的詳細

戻り値:1つのCSSStyleDeclaration要素のstyle属性を表すオブジェクト
DOMバージョン:CSSオブジェクトモデル(CSSOM)

さらに例

<p>要素の上端の値を取得:

var x = document.getElementById("demo").style.borderTop;
テストしてみる‹/›

を使用して要素 .setAttribute()メソッドでCSSスタイルを設定:

var div = document.querySelector("#myDiv");
div.setAttribute("style", "color:red; border: 1px solid blue;");
テストしてみる‹/›

関連参考

CSS教程:CSS教程

CSS参考:CSS属性全書

HTML参考:HTMLスタイル属性

HTML参考:HTML <style>タグ

HTML DOM Element オブジェクト