クラスの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 ベストアンサー 回答者： taloo 回答日時： 2012/06/08 07:29

質問文の例では#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

この回答へのお礼

とても親切な解説がありましたので　いろいろ試して　解決したいと思います。

ありがとうございました。





なお、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

お礼日時：2012/06/08 15:55