現在適用されているCSSの値をJavascriptで取得する

2008年9月25日 00:35

この記事は、[暴満館]さんの「JavaScriptによるCSSの操作」と[IT戦記]さんの「getComputedStyle について調べてたら深みにハマったのでメモ」を参考にさせて頂きました。

外部CSSファイルなどから適用されているCSSのスタイル（や値）を取得するスクリプトです。 通常、Javascriptからstyleを操作する場合、「element.style.marginLeft = '15px'」などと記述すると思います。 しかしこれ、「style = element.style.marginLeft」などとしても、Javascriptで値を設定したあとでないとうまく値を取得できません。

ということで、今回はJavascriptを使って、外部（内部）CSSや、直接指定されているスタイルなどの値を取得するスクリプトの紹介です。
「現在適用されているCSSの値をJavascriptで取得する」サンプル

▼EntryMore▼

Javascriptソース

ダウンロード

getStyle.js

使用方法

使い方はいたって簡単です。
まず、上記「ダウンロード」にあるJSファイルを保存して、それを読み込ませます。
読み込ませたら「getStyle」関数で現在適用されているスタイルの値を取得することができます。

getStyleの引数は「値を取得したいオブジェクト、取得したいプロパティ、[オプションとして擬似要素]」となります。
ただし、擬似要素の取得はIEでは対応していないので、実際使うタイミングはないかもしれません。

getStyle関数の返り値は指定したプロパティの値となります。
（margin-topなどの場合、**pxと返されます）
計算などに使う場合には、数値として整形する必要があります。

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/101

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。

ページトップへ