- ベストアンサー
JavaScriptでCSSのプロパティの取得
JavaScriptで要素ごとでそのブラウザで使えるCSSのプロパティの取得はできるものでしょうか？ そのプロパティの取り得る値も一緒に取得できると嬉しいです。 もし、できるならやり方を教えてください。
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＃１>何か間違っているのでしょうか？ スクリプトの記述は間違っていないと思います。 ＃１＞どの要素を選択しても同数のプロパティが書き出されるのです おそらく、エレメントが作成された時点で、デフォルトのスタイルのプロパティが（継承して？）設定されるのでしょうね。 私が調べてみたところでも、本来そのエレメントに有効でないプロパティがあったり、あるはずのプロパティがなかったり（クリエイトエレメントしただけで実際のＨＴＭＬの部分としてアペンドエレメントしてないから？）しているのを確認しました。 javascript では、自由にプロパティの追加ができるので、 プロパティとして存在しても それがそのエレメントで本当に有効なのかどうかはわからない ということだと思います。 結局、＃１のスクリプトは、ある時点で、存在しているプロパティを調べているのですが、それがそのエレメントでスタイルとして有効なプロパティかどうかはわからんということですね。ｏｒｚ
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
例えば、こんな感じでしょうか。 プロパティの取り得る値をjavascript から取得できるかどうかはわかりません。 ブラウザによっては定数として取得できるかもしれません。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>プロパティの総覧</title> <script type="text/javascript"><!-- var spanEl = document.createElement('span'); for(prop in spanEl.style){ alert(prop + ":" + spanEl.style[prop]); } //--> </script> </head> <body> SPANエレメントのstyle プロパティを調べる </body> </html>
補足
スクリプトありがとうございます。 早速テストさせて頂いたのですが、これって本当に各要素で使えるCSSのプロパティなんでしょうか？ と言うのも下のように変更して使って見たのですがIE6でもFirefoxでもどの要素を選択しても同数のプロパティが書き出されるのです。 書き出されるプロパティの数はbody内のDIVの数で見ています。 何か間違っているのでしょうか？ もしお時間がありましたら何か教えて頂けますでしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>プロパティの総覧</title> <script type="text/javascript"><!-- function a(obj){ name=obj.value; document.getElementsByTagName('span')[0].firstChild.nodeValue=name; var spanEl = document.createElement(name); var DIV = document.getElementsByTagName('div'); var cc = DIV.length; if( cc != 0 ){ for(k = 0;k < cc;k++){document.getElementsByTagName('body')[0].removeChild(DIV[0]);}} for(prop in spanEl.style){ var DIV = document.createElement('div'); str=prop + ":" + spanEl.style[prop]; var TEXT = document.createTextNode(str); document.body.appendChild(DIV); DIV.appendChild(TEXT); } document.getElementsByTagName('span')[1].firstChild.nodeValue=document.getElementsByTagName('div').length; } //--> </script> </head> <body> <span>SPAN</span>エレメントのstyle プロパティを調べる<span>a</span> <select onchange="a(this)"> <option value="TT">TT</option> <option value="I">I</option>要素名が続く.. </select> </body> </html>
お礼
ご回答ありがとうございます。 よくよく考えて見るとブラウザ間でプロパティの違いはあってもdisplayがCSS2と同じ値が取れれば要素間でプロパティってそんなに変わらないですよね。 自分の質問もなにかおかしい気がしてきました。 でも、書き出されるものがCSSでスタイルを設定する時のプロパティと違いがあるような気もします。 ちょっと引っかかる所もありますが、何か安易な質問をしてしまったようですみません。