• ベストアンサー

外部シートの背景色を得る

xx.cssに .bodybg{background-color: #eeeeee} と書いてあります。 こうしてbodyの背景色が決められています。 このbodyの中から#eeeeeeを得ようとして <head> <title></title> <link rel="stylesheet" type="text/css" href="xx.css"> </head> <body class="bodybg"> <script language="JavaScript"> function func(){ alert(document.body.bgColor) } </script> と書きました。得たいのは#eeeeeeですが、単に#eeeeeeといて得るのではなく、bodyの背景色を得る方法を教えてください。

  • ursmr
  • お礼率39% (16/41)

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

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

ＩＥの場合 currentStyle プロパティ http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/currentstyle.asp を使って alert(document.body.currentStyle.backgroundColor) のように取得できますが、 非標準プロパティです。 一般的にはどうすべきかはわかりません。

ursmr
質問者

お礼

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

その他の回答 (3)

noname#22259
noname#22259
回答No.4

>>No.3 --> ×（HTMLメチャクチャ^^） [訂正]↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang=ja><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="xxx.css"> <style type="text/css"> /*----xxx.css actually---------------- */ body { background-color:#00caca; font-size: 16px; } </style> <script type="text/javascript"> function getStyleValue(){ var x = document.getElementById('bid'); if (x.currentStyle){//IE5+ var y = x.currentStyle['backgroundColor'];} else if (window.getComputedStyle){//W3C(Moz, Opera) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue('backgroundColor');} alert('backgroundColor='+y); } </script> </head> <body id="bid"> <p> <input type="button" onclick="getStyleValue()" value="Get style"> </p> </body> </html>

ursmr
質問者

お礼

知らないタグがいっぱいあって複雑そうですが、IEでできました。 ありがとうございました。

noname#22259
noname#22259
回答No.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang=ja><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="xxx.css"> </head> <body> <style type="text/css"> /*----xxx.css actually---------------- */ body { background-color:#00caca; font-size: 16px; } </style> <script type="text/javascript"> function getStyleValue(){ var x = document.getElementById('bid'); if (x.currentStyle){//IE5+ var y = x.currentStyle['backgroundColor'];} else if (window.getComputedStyle){//W3C(Moz, Opera) var y = document.defaultView.getComputedStyle(x,null).getPropertyValue('backgroundColor');} alert('backgroundColor='+y); } </script> <body id="bid"> <p> <input type="button" onclick="getStyleValue()" value="Get style"> </p> </body> </html>

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

http://okwave.jp/kotaeru.php3?qid=1571792 も参考にしてみて下さい。 Firefox の場合 alert( getComputedStyle(document.body, null).getPropertyValue('background-color')); のようにして取得(rbg(238,238,238) という形式)できます。

ursmr
質問者

お礼

Firefoxは使っていないので試せませんでしたが、 ありがとうございました。

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

関連するQ&A

  • HP作成　スタイルシート

    ビルダーを使ってHPを作成しています。そこで、ページの背景の上だけにgif画像を指定したくスタイルシートを追加してみたのですがうまくなりません。ビルダーのHTMLに追加しているのですが追加する場所を間違えているような気がします。ビルダーで背景色を#cc0000設定しています。 <TITLE></TITLE> <STYLE type="text/css"> <!-- BODY { background-image: url("image/gurad1.gif"); background-repeat: repeat-x } --> </STYLE> <LINK rel="stylesheet" href="image/table.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> </HEAD> <BODY bgcolor="#cc0000" link="#ffffff" alink="#009900">

  • ブラウザの解像度横幅1280の時スタイルシートを記述したいのですが

    記述が間違ってると思われうまくいきません。 どなたか間違ってるところを指摘してくださいませ。。 初心者ですお願い致します。 <html> <head> <title>モニタサイズに合わせてウィンドウサイズを変更する</title> <script Language="JavaScript"><!-- w = screen.width; moveTo(0,0); if (w == 1280) { document.write ("<link rel=stylesheet href="'+ a.css +'" type="text/css">"); } else if () { document.write("<link rel=stylesheet href="'+ b.css +'" type="text/css">"); } // --></script> </head> <body> </body> </html> なおa.cssには、背景黒くしてます。

  • IEで背景画像が表示されない

    【HTML部分】 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>あああああ</title> <link href="text.css" rel="stylesheet" type="text/css"> </head> <body> あいうえお </body> </html> 【CSS部分】 body { background-image: url("./img/back.jpg"); background-repeat: repeat; } Firefox系やchrome系では背景が表示されるのですが、IEでのみ白色となってしまいます。 検索してひと通りの解決方法を試してみましたがどれもうまくいかず…。 解決のヒントをいただけたらと思います。 よろしくお願いしますm(_ _)m

    • ベストアンサー
    • HTML
  • スタイルシートと、背景色の設定について

    画像を画面の中心に表示させようと、以下の様に設定したら、背景色が白になってしまうのです。 この場合どのようにすれば、背景を黒く設定できるのでしょうか？　画像の背景が黒なので困っています（涙 <head> <style type="text/css"> <!-- body{background:fixed url(＊＊＊.gif) no-repeat 50% 50%} --> </style> </head> <BODY bgcolor="#000000"> 宜しくお願いします。。。

    • ベストアンサー
    • CSS
  • HTMLメールの外部CSSが有効になりません

    HTMLメールから以下のように外部CSS（http://から始めてます）を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか？ <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

  • 外部スタイルシートが読み込めない

    こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 外部ファイルのCSSを適用するには？

    CSS超初心者です。 ぜひ教えてください。 現在作成しているhtmlに簡単な背景をcssで外部ファイルとして読み込むようにしたいのですが本を見ながらやっているのですがうまくできません。 勉強が足りないといったらそれまでなのですがどうか教えてください。 背景にはbackground.gifという小さな画像を敷き詰めたいのですが このソースだけでいいのでしょうか？ ●cssソース（back.css） body {background : url("http://fiesta2.com/background.gif") ; background-repeat : repeat; } 続いてback.cssを読み込ませたいhtmlのソースです。 ●htmlソース <html> <head> <link rel"stylesheet" href="back.css" type="text/css"> <meta http-equiv="content-type" content="text/html;charset=x-sjis"> <meta name="generator" content="Adobe GoLive 5"> <title>Welcome to FIESTA!</title> </head> <body> <div align="center"> <table cool width="489" height="758" usegridx usegridy showgridx showgridy gridx="16" gridy="16" border="0" cellpadding="0" cellspacing="0"> ～中略～ </div> </body> </html> 専門家の方にはささいな質問かもしれませんが 超初心者のためよろしくお願いします。

  • javascriptで外部cssの値の変更

    以下のような外部cssのjavascirptでの値の変更のしかたを教えて下さい a.css #head{ margin:0px; padding:0px; background-color:#ccffcc;←この値を変更したい } a.html <html> <head> <link rel="stylesheet" type="text/css" href="a.css" media="all" id="cssa"> </head> <body> <div id="head"></div> </body> </html>

  • <head>外での、外部css、外部jsの読み込み

    基本的な質問で失礼します。 <head>内ではなく、たとえば<body>内に外部cssと外部jsを読み込む際、 今まで、以下のようにスクリプトを書いて読み込んでおり、うまくいっていました。 <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print">'); document.write('<script src="hoge.js" type="text/javascript"></script>'); </script> ところが、あるサイト作成時、上記スクリプトでは効かなくなってしまいました。 （HTML 4.01 Transitional） そこで、<head>内で書くように、以下のように記述したら、うまく機能しました。 <link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print"> <script type="text/javascript" src="hoge.js"></script> 自分の中では、この記述は<head>内で書くときであって、<head>外ではうまく読み込めないと思っていたのです。 そもそも、<head>外なのに、このような書き方をしてよいものでしょうか？ まぁ、きちんと読み込めていて、動きも期待通りだから良いのでしょうが… 皆さん、どのように読み込んでいるのかなっと思い質問してみました。 どうぞ宜しくお願いいたします。

  • 外部cssがうまくできません。

    外部cssがうまくできません。 よろしくお願いいたします。 ホームページ作成初心者です。 Mac OS X Snow Leopardです。 デスクトップに Homepageというフォルダを作成しました。 そのHomepageフォルダの中に、 index.htmというファイル -----------以下内容------- <html> <head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> 背景を青くしたい </Body> </html> ----------------------------------- とstyle.cssというファイル ---------以下内容----------- body {background-color: blue} ----------------------------- を テキストエディットで作成しました。 背景を青くしたいのですが、なりません FirefoxでもSafariでもなりません。 何が間違っているのでしょうか？ 教えていただきたいです。 よろしくお願いいたします。

    • ベストアンサー
    • Mac

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する