JavaScript を使用して CSS 値を取得するにはどうすればよいですか?

JavaScript を使用した CSS 値の取得

JavaScript を使用した CSS 値の設定に加えて (例: document.getElementById('image_1').style) .top = '100px')、特定のスタイル プロパティの現在の値を取得することもできます。これは、現在のスタイルに基づいて要素の外観を動的に調整するなど、さまざまな目的に役立ちます。

特定の CSS プロパティの値を取得するには、getComputedStyle() メソッドを使用できます。このメソッドは要素を引数として受け取り、その要素の計算されたスタイルを表す CSSStyleDeclaration オブジェクトを返します。 CSSStyleDeclaration オブジェクトの各プロパティは CSS プロパティに対応し、プロパティの値はそのスタイル プロパティの計算値を反映します。

次に例を示します。

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');
console.log(top);

この例ではでは、getComputedStyle() メソッドを使用して、ID「image_1」の要素の計算されたスタイルを取得します。次に、getPropertyValue() メソッドを使用して、この要素の「top」スタイル プロパティの値を取得します。 「top」プロパティの値 (この例ではおそらく「100px」) は、top 変数を介して利用可能になり、JavaScript コード内でのさらなる処理や操作に使用できます。

以上がJavaScript を使用して CSS 値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。