クラスのcolorを表示する方法を教えてください

前へ 次へ
このQ&Aのポイント
  • CSSのクラスsampleのcolorを#ff0000で表示する方法を教えてください。
  • HTML内のJavaScriptで、クラスsampleのcolorを取得する方法を教えてください。
  • HTML内の<span>タグにidを設定して、クラスsampleのcolorを表示する方法を教えてください。
回答を見る
  • ベストアンサー

クラスのcolor　「#ff0000;」を表示

ＣＳＳのクラスsampleのcolor　「#ff0000;」を表示する方法を教えてください。 // cssの部分 .sample　｛ 　　　color: #ff0000; ｝ // html内　ＪａｖaScriptの部分 <script type="text/javascript"> function () { var element = document.getElementById("sample"); var samplecolor = element.style.color; } </script> <span id="samplecolor"></span> //----------結果------------------- #ff0000;

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

質問文の例では#ff0000になり得ないので、適宜脳内変換します。 getComputedStyle(document.getElementById('sample'), '').color; getComputedStyleについてはこちらが詳しいと思います。 http://d.hatena.ne.jp/amachang/20070611/1181554170 ただし、ブラウザが内部で保持している値ですので、色情報の場合は、 #ff0000（16進数、小文字） #FF0000 （16進数、大文字） rgb(256, 0, 0) （RGB値） 等々、ブラウザ、バージョンごとに異なります。 （各ブラウザの最新バージョンでは統一されていると思いますが。） この点がelement.styleと異なります。 element.styleは代入したそのままの値を取得できます。 element.style.color='#ff0000'; alert( element.style.color); // "#ff0000" alert( getComputedStyle(element, '').color); //"rgb(256, 0, 0)" getComputedStyleのメリットは、style属性に書いていなかったり、styleプロパティに代入していなくても値がとれることにあります。 CSSファイルの内容を直接解析したいのであれば、cssRuleを使用してください。 https://developer.mozilla.org/en/DOM:cssRule.style

synchro-night
質問者

お礼

とても親切な解説がありましたので　いろいろ試して　解決したいと思います。 ありがとうございました。 なお、element.styleは一応使えるのですが CSSから情報を得ることができないのです。 追加で調べたリンクを貼っておきます。 http://d.hatena.ne.jp/amachang/20080425/1209105991 http://d.hatena.ne.jp/uupaa/20101211/1292068956 http://uhyohyohyo.sakura.ne.jp/javascript/5_1.html

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 色をラジオボタンで選択

    エレメントでボタンを押すと色を変えるJavaScriptです。 検索をしながら　ボタンで一度変えることはできるようになりましたが <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <button onclick="effect()">チェンジ</button> <span id="sample">■□□■</span> ラジオボタンで選択するようにしたいのですが どのようにすればよいでしょうか？ うまくいく方法を教えてください。 ブラウザーはGoogle Chrome最新版です。 どうしてもできなければ　Firefoxでもかまいません。 <script type="text/javascript"> function effect() { var element = document.getElementById("sample"); element.style.color = '#000000'; } </script> <input type=radio name="colorcode" value="#000000" checked>黒 <input type=radio name="colorcode" value="#ff0000">赤 <input type=radio name="colorcode" value="#00ff00">緑 <span id="sample">■□□■</span>

  • 表示・非表示のスクリプトで、複数指定する場合はどうしたらいいですか？

    複数のコンテンツをボタンクリックにて表示・非表示にしたいのですが、うまくいきません。 なんとか、2つまではわかったのですが、3つまで表示すると3つ目が非表示になってくれません。 最終的には5つくらいを下記のスクリプトで行いたいのですが、どうすれば、複数のIDを対応させることができますか？ ●例えば、test1を押した際、test2と3は非表示としたいです。 <script language="JavaScript" type="text/JavaScript"> <!-- function ChDsp2(strShow,strHidden){ var obj=''; obj=document.all && document.all(strShow) || document.getElementById && document.getElementById(strShow); obj.style.display = "block"; obj=document.all && document.all(strHidden) || document.getElementById && document.getElementById(strHidden); obj.style.display = "none"; } //--> </script> <a href="javascript:ChDsp2('text1','text2');">1を表示</a> <a href="javascript:ChDsp2('text2','text1');">2を表示</a> <a href="javascript:ChDsp2('text3','text1');">3を表示</a> <span id="text1" style="display:block;">111111</span> <span id="text2" style="display:none;">222222</span> <span id="text3" style="display:none;">333333</span> どなたか教えてください。お願いします。

  • ownerDocumentの使い方を知りたいです。

    javascriptの.ownerDocumentの使い方を知りたいです。 https://developer.mozilla.org/ja/DOM/element.ownerDocument のサイトを参考に実際にいろいろ試してみました。 ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test1() { var a = 123; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test1()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test2() { var a = this.ownerDocument; document.write(a); } </script> <div> <span onclick="test2()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー <script type="text/javascript"> function test3() { var a = this; var b = a.ownerDocument; document.write(b); } </script> <div> <span onclick="test3()">テスト</span> </div> ーーーーーーーーーーーーーーーーーーーーー 全てundefinedとなり、そのまま固まってしまいます。 .ownerDocumentはどのように使うのでしょうか。 アドバイスをよろしくお願いします。

  • 数値の表示方法を教えてください。

    以下のプログラムで千円単位のカンマの表示方法や 小数第2位までの表現方法を教えてください。 よろしくお願いします。 <script type="text/javascript"> function keisan(){ 　　var syouhizei = document.form1.syouhin1.value * 1.05; 　　document.getElementById("zei").innerHTML = syouhizei; } 【省略】 <td><span id="zei">0</span> 円</td>

  • 引数のある関数をhtml読み込み後に実行

    次のhtmlとスクリプトでresultのような結果を得たいのですが、スクリプトがheadにあるとエラーが出てしまいます。 body直前にスクリプトを置けば動作はするのですが、head内で動作させるにはどうしたら良いのでしょうか？ [html] <div id="here"></div> [JavaScript] function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = '<p>content</p>'; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); [result] <div id="here"> <span> <p>content</p> </span> </div> よろしければどなたかアドバイスを頂けると助かります。 よろしくお願い致します。

  • javascript初心者です。

    javascript初心者です。 特定要素の相対座標位置を取得したく、getBoundingClientRect()を使用しているのですが、firefox2.0でも、見れるようにしなくてはいけなくて、その場合、getBoundingClientRect()がfirefox2.0では使えません。 それに変わる関数などを探していましたが、わからなかったので、下記のソースを var element = document.getElementById("sample"); var elementY = element.getBoundingClientRect() 以下のように変えてみました。 var element = document.getElementById("sample"); var elementY = element.offsetTop - window.screenY; ですが、予期した値が取得できません。 ページ内で、スクロールすると、elementYが変わるようになっています。 どう書き換えたらよいか、どなたかご教授お願いいたします。

  • for in と　接続演算子について

    <!-- function check(){ var flag = 0; if(document.registform.user.value==""){ flag = 1; var error1 = document.getElementById("error1"); if(error1 == null){ var element1=document.createElement("div"); element1.innerHTML='<span class="error0" id="error1">ユーザー名を入力してください。</span>'; var ojbody1=document.getElementById("td_error1"); ojbody1.appendChild(element1); } } if(document.registform.pass.value==""){ flag = 1; var error2 = document.getElementById("error2"); if(error2 == null){ var element2=document.createElement("div"); element2.innerHTML='<span class="error0" id="error2">パスワードを入力してください。</span>'; var ojbody2=document.getElementById("td_error2"); ojbody2.appendChild(element2); } } if(document.registform.pass2.value==""){ flag = 1; var error3 = document.getElementById("error3"); if(error3 == null){ var element3=document.createElement("div"); element3.innerHTML='<span class="error0" id="error3">パスワード(確認)を入力してください。</span>'; var ojbody3=document.getElementById("td_error3"); ojbody3.appendChild(element3); } } if(flag == 0){ return true; }else{ return false; } } //--> javascript初心者です。 この処理をfor(key in array)を使って簡単にできるかも... と思ったんですが接続演算子の使い方がよくわかりません。 プログラム自体初心者独学で手探りでやっているため考え方が間違っている場合などありましたらアドバイス等もいただけたらうれしいです。 if(document.registform.user(☆).value==""){ flag = 1; var error1(☆) = document.getElementById("error1(☆)"); if(error1(☆) == null){ var element1(☆)=document.createElement("div"); element1(☆).innerHTML='<span class="error0" id="error1(☆)">ユーザー名(☆)を入力してください。</span>'; var ojbody1(☆)=document.getElementById("td_error1(☆)"); ojbody1.appendChild(element1(☆)); }} (☆)のところが接続演算子が使えればと思いました。 例えばvar element + key でelement1の変数というのは無理なのでしょうか？ もし可能ならgetElementById("error + key ")はどういった書き方をすればよいでしょうか？ よろしくお願いします。

  • 効率良くイベントに引数を渡すやり方

    sample2に引数「x」「y」を渡したいが為に 次のように何段階も同じような作業をしなくてはならない方法しか 自分は思いつかないのですが、何かもっと効率的な方法はあるのでしょうか？ function main() { var element = document.createElement('div'); element.x = x; element.y = y; element.onclick = function(){ sample1(this.x, this.y); }; } function sample1(x, y) { var element = document.createElement('span'); element.x = x; element.y = y; element.onclick = function(){ sample2(this.x, this.y); }; } function sample2(x, y) { alert("x="x+" y="+y); }

  • if構文

    初心者でif構文がよくわからず質問させてください。 下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名（うさぎ・とり）を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script> <!-- function aGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } function bGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } --> </script> どうかおしえてください。 よろしくお願いします。

  • javascriptで困っています。教えてください

    javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; 　　　　} var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する