このガイドでは、JavaScript の HTML DOM 要素の「style」プロパティの目的と機能について詳しく説明します。
HTML DOM 要素の「style」プロパティは JavaScript でどのように機能しますか?
HTML DOM 」 スタイル 」は、割り当てられたスタイル プロパティに基づいて機能する読み取り専用プロパティです。また、「」を返します。 CSSスタイル宣言 」オブジェクトには、特定の HTML 要素のすべてのインライン スタイル属性が含まれます。
ノート： 「CSSStyleDeclaration」オブジェクトには、head セクションで定義された CSS スタイル属性が含まれています。
構文 (スタイルプロパティの設定)
エレメント。 スタイル 。 財産 = 価値上記の構文によれば、「 スタイル 「プロパティは 1 つのパラメータのみをサポートします」 価値 」は、指定されたスタイル プロパティの値を表します。
構文 (スタイルプロパティを返す)
エレメント。 スタイル 。 財産上で説明した「style」プロパティの構文を実際に実装してみましょう。
例 1: 「style」プロパティを使用して特定の HTML 要素の色を設定する
この例では、「」の基本構文を適用します。 スタイル 」プロパティを使用して、特定の HTML 要素の色が変更されるように「style」プロパティの値を設定します。
HTMLコード
まず、指定された HTML コードを実行します。
< h2 > JavaScript で style プロパティを使用する h2 >
< h3 ID = 「H3」 > 2 番目の小見出し。 h3 >
上記のコード行では次のようになります。
- ” ” HTML タグは最初の小見出しを指定します。
- ” 」タグは、ID「H3」が割り当てられたレベル 3 の 2 番目の小見出しを作成します。
JavaScript コード
次に、記載されている JavaScript コードに従います。
< 脚本 >書類。 getElementById ( 「H3」 ) 。 スタイル 。 色 = '緑' ;
脚本 >
上記のコード スニペットでは、「 document.getElementById() ” メソッドは、含まれている “ ” ID を介した要素” H3 ” で指定した” を設定します 色 ” を介して要素の属性値を取得します。 スタイル.カラー ' 財産。
出力
出力は、ターゲットの HTML 要素の視覚表現が「style」プロパティを使用して適切に設定されていることを示します。
例 2: 「style」プロパティを使用して、適用された「style」属性の値を取得する
この例では、「style」プロパティは、一般化された構文を使用して HTML 要素に割り当てられた「style」属性を見つけるのに役立ちます (style プロパティを返す)。
HTMLコード
HTML コードは次のように記述されています。
< h2 > JavaScript で style プロパティを使用する h2 >< h3 ID = 「H3」 スタイル = '背景色:オレンジ;' > 2 番目の小見出しの背景色の値は次のとおりです。 : h3 >
< h4 ID = 'デモ' > h4 >
このコードでは:
- ” 」 HTML タグでは、HTML 要素「
」の背景色を設定する「style」属性を使用します。
- ” 「タグは、ID を持つレベル 4 の空の小見出しを作成します」 デモ ”。
JavaScript コード
次に、指定された JavaScript コードを見てください。
< 脚本 >定数 価値 = 書類。 getElementById ( 「H3」 ) 。 スタイル 。 背景色 ;
書類。 getElementById ( 'デモ' ) 。 内部HTML = 価値 ;
脚本 >
上で書いたコードでは次のようになります。
- 変数「 価値 ” は” で宣言されます。 定数 「」を適用するキーワード document.getElementById() 」メソッドを使用して、その ID を使用して「
」要素をフェッチし、適用された「style」属性の値を取得し、それを「style」プロパティ経由で要素、つまり「
」に適用します。
- 「document.getElementById()」メソッドを再度使用して、追加された空の「
」要素にアクセスし、フェッチされた HTML 要素に対して割り当てられた「style」属性の値を表示し、それを「」を介して小見出しとして追加します。 内部HTML ' 財産。
出力
出力では背景色が要素に適用され、設定された「style」属性の値もそれに応じて返されます。
結論
JavaScript では「」が使用されます。 スタイル 」プロパティを使用して、HTML DOM 要素のインライン「スタイル」プロパティを割り当てて返します。必要な機能をそれに応じて適用するには、追加の「値」が必要です。設定と取得とは別に、既存の「style」属性を変更することも有益です。このガイドでは、HTML DOM 要素スタイル プロパティの主な目的、機能、および実際的な実装について説明しました。