クラスの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） · ベストアンサー

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