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

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

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

しかしこれ、「style = element.style.marginLeft」などとしても、Javascriptで値を設定したあとでないとうまく値を取得できません。

function styleTest1() { var obj = document.getElementById('test'); var styletype = document.getElementById('styletype').value.camelize(); if( !styletype ) { alert( '確認したいプロパティを選択してください。' ); return false; } var mt = obj.style[ styletype ]; alert( styletype + 'の値は「' + mt + '」です。' ); }

element.style.propatyの形でCSSを取得しようとしてみます。
上のスクリプトを実行しても、値は空になります。 ⇒サンプルを実行

function styleTest2() { var obj = document.getElementById('test'); var styletype = document.getElementById('styletype').value; if( !styletype ) { alert( '確認したいプロパティを選択してください。' ); return false; } if( obj.currentStyle ) { //IE or Opera if( styletype.indexOf( "-" ) != -1 ) styletype = styletype.camelize(); mt = obj.currentStyle[ styletype ]; } else if ( getComputedStyle ) { //Mozilla or Opera or Safari mt = document.defaultView.getComputedStyle( obj, '' ).getPropertyValue( styletype ); } alert( styletype + 'の値は「' + mt + '」です。' ); }

CSSファイルなどで指定されている値を取得するには上のスクリプトで実現できます。 ⇒サンプルを実行