- ベストアンサー
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>
関連するQ&A
- 【HTML＆JavaScript】JavaScriptでのCSSの操作
【HTML＆JavaScript】JavaScriptでのCSSの操作 みなさんはじめまして、kimama8と申します。 今回は、JavaScriptによるCSSの操作について聞きたいことがありましたので、 質問させていただきます。 div要素のCSSプロパティの一つ、visibilityプロパティをJavaScriptから操作するには、 どのようにすればよいのでしょうか？ 「CSS JavaScript 操作」などと検索にかけても、自分に合う情報が得られなかったので ここで質問させていただきます。 忙しいとは思いますが、よろしくお願いします。
- ベストアンサー
- レンタルサーバ・ASP
- CSS, Javascript読み込めない
Windows10のノートパソコンを使用しています。各ブラウザの設定は初期設定のままです。 ローカル(PC内)でHTMLファイルにCSSファイル1つとJavascriptファイル1つを読み込ませ、Google Chrome, Microsoft Edge, Internet Explorerで開いたのですが、どのブラウザでもCSSもJavascriptも認識されていません。 ファイル名とそのパスやソースコードを確認しましたが、記述に間違いはありません。htmlファイルと同じ階層にCSSファイルとJavascriptファイルを入れています。 Google Chromeの検証機能で確認するとCSSとJavascriptのファイルが見つかりませんとなっています。 ネットで調べましたが原因は不明です。以上のことから、CSS、Javascriptが読み込めない原因として考えられることを教えて下さい。
- ベストアンサー
- HTML
- CSSやJavaScriptのバージョン指定
HTMLを書くときにCSSやJavaScriptのバージョン指定は必要なのでしょうか。 各ブラウザのバージョンによって対応するCSS・JavaScriptのバージョンが決まっていると思うのですが、例えば、CSS3やJavaScript2がでてきたときに、バージョン指定していないWebページで表示が壊れる等ないのでしょうか。 現在CSS2.1で書かれたページもいつかは、CSS2.1対応のブラウザがなくなり見れなくなります。 ただ、近々CSS3がでたときにバージョン指定していないため、ブラウザ側でCSS3で表示しようとし、見れなくなる等あるのでしょうか。 ご回答いただければ幸いです。
- ベストアンサー
- HTML
- javascriptでウィンドウやタグ要素の幅、高さを取得
javascriptでウィンドウやタグ要素の幅、高さを取得したいのですが、 ブラウザによって使うプロパティが異なり、正直混乱してます。 なにかいいまとめのページとかありませんか？ （offsetWidth、clientWidth、scrollLeft、posLeft・・・orz..） それと、IE6とIE7ではそこらへんのプロパティは違う（IE7は標準になった？） とかありますか？ 教えてください！
- ベストアンサー
- JavaScript
- jQueryでCSSのプロパティに変数を付与
javascriptで、ブラウザの種類を判別し変数prefix にfirefoxなら-moz-、webkitなら-webkit-を格納するスクリプトを作成しました。 jquery1.7にてCSSを操作する際に $("#hoge").css({ prefix + "animation-name" : "name", prefix + "animation-duration": "5s" }); と記述した所、構文エラーになってしまいました。 ｊQueryでCSSの値に変数を使用することはできるようですが、プロパティに変数を使用することは出来ないのでしょうか？
- ベストアンサー
- JavaScript
- 使えるプロパティを調べる(？)
今、javascriptで一部の要素にカーソルのスタイルを指定しています。 ですが、IE5.xで対応していないとエラーが出てしまうためこのエラーを消したいと思っています。 ブラウザで使えるプロパティかどうかを調べるような記述があったと思うのですが、思い出せず探してもなかなか出てきません。 わかる方いらっしゃれば教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptからCSSを呼び出す方法
現在、Noscript時とJavaScript稼働時の呼び出すCSSを分けるため、下記のような設定をしています。whole.cssからJavaScript稼働時のCSSをimportしています。 IE6エラー内容は「'framename' が宣言されていません」です。 記述 <link href="whole.css" rel="stylesheet" type="text/css" id="css"/> <script> framename.document.getElementById ('css').href = 'whole.css'; </script> JavaScript稼働時に呼び込む設定となっています。 IE6のエラー以外他ブラウザーは正常に表示されます。 よろしくお願いします。
- 締切済み
- JavaScript
- meta css javascript 必要性
charset、keywords、robots、Expire等は わかるのですが、 <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> これは、書くことが推奨されるとなっています。 サーバー、ブラウザ間では このタグによって どのような事が おこなわれてるのでしょうか。 サーバー側から css、javascript使ってますよーと ブラウザに情報を わたす？ しかし、タグ自体は サーバー関係あるのだろうか？と、大混乱中。 javascriptの場合、onClick= は javascriptですよーとの宣言との事。 これを指定しなくてもうまくいきますが、ブラウザはなにかわからんけど、javascriptだろうと 勝手に解釈してるということでしょうか。 ちょっと おかしな想像ですが 迷う事はないのでしょうか？ →ブラウザ側での表示までに無駄な考える事を増やしてる？ (相当、小さなものだと思いますが。。) meta javascript と meta ｃｓｓ が なぜ 推奨となってるのか、 書く事の メリット デメリット？ が あれば 意見欲しいです。
- ベストアンサー
- HTML
- CSSでセンタリングしたい
こんにちは 現在デザインをCSSでWebサイトを構築していますが、どうしても分からないことがあります。 今まで、センタリングはcenter要素で行っていましたが、CSSではどのようにして行うのでしょうか。 ソニー : http://www.sony.co.jp/ のようにbody要素全体をセンタリングしたいです。 text-align :center はインライン要素専用ですので、ブロック要素ができるCSSはあるのでしょうか?Webブラウザに依存するJavaScriptなどのスクリプトは使用できません。
- ベストアンサー
- CSS
- cssにjavascriptを入れる？呼び出す？？
技量が乏しいので見当違いな質問でしたらすいません。 今ホームページにjavascriptによるログ解析を行うためhtmlファイルにタグを挿入しているのですが、すべての該当ページに挿入するのに苦労しています。 これをcssを使う事でcssだけ変更すればすべてのファイルにjavascriptを追加するような事はできませんでしょうか。 cssの記述方法についてご教授頂ければありがたいです。 cssやjavascriptそれぞれ1つとっても私には難しく・・・ よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 よくよく考えて見るとブラウザ間でプロパティの違いはあってもdisplayがCSS2と同じ値が取れれば要素間でプロパティってそんなに変わらないですよね。 自分の質問もなにかおかしい気がしてきました。 でも、書き出されるものがCSSでスタイルを設定する時のプロパティと違いがあるような気もします。 ちょっと引っかかる所もありますが、何か安易な質問をしてしまったようですみません。