質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

12062閲覧

cssで設定した背景色をjsで取得したい

otftrough

総合スコア476

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/05/27 12:54

tableタグの指定したセルに背景色をつける練習用プログラムを作っています。
下のコード内のfor文で、3列目のセルに青い背景色を設定していますが、cssで設定した黄緑のセルにも青が上塗りされています。
セルが白以外の背景色だった場合に、元の背景色と青との中間色を背景色にしようと思ったのですが、セルの色を取得しようとしても、alert(td[i].style.backgroundColor);ではcssで設定した色を取得できませんでした。
どうすれば取得できますか?
html画面

html

1<html> 2<head> 3<meta charset="utf-8"> 4<title>サンプル 5</title> 6<style type="text/css"> 7td{ 8 border: solid 1px green; 9} 10</style> 11<script type="text/javascript"> 12onload = function(){ 13 14 var td = document.getElementsByTagName("td"); 15 var tr = document.getElementsByTagName("tr"); 16 var sel = 3; 17 sel --; 18 for(i = 0; i < td.length; i ++){ 19 20 if(i % tr.length == sel){ 21 22 td[i].style.backgroundColor = "blue"; 23 } 24 } 25} 26</script> 27</head> 28<body><br> 29<center> 30<h1>あいうえお</h1> 31<table border="0" cellspacing="0" cellpadding="20"> 32 33 長いので省略。5行*5列のセルに適当な文字列が入っていて、3番目のtrタグに背景色"lime"を指定。 34 35</table> 36</center> 37</body> 38</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/05/27 13:23

省略した部分が肝心なのに…
guest

回答2

0

ベストアンサー

CSSをjavascriptで調べるとき、IEかそうでないかで使えるものが違います。

javascript

1for(i=0;i<td.length;i++){ 2//IE以外 3console.log(window.getComputedStyle(td[i]).backgroundColor); 4//IEの場合 5console.log(td[i].currentStyle.backgroundColor); 6}

なのでバニラのjavascriptだけでは、使える関数を判定するためにブラウザの判定をする手間(currentStyleがundefinedかどうか調べる)があります。katoyさんが書いているようにjQueryを使えるなら使ったほうが楽です。

ですが、この場合はもっと楽な方法があります。
背景に青色とか緑色を付けるときにclassを使ってしまえば良いのです。

css

1.blue{ 2background:rgb(0,0,255); 3} 4.lime{ 5background:rgb(0,255,0); 6} 7.blue.lime{ 8background:rgb(0,128,128); 9}

投稿2016/05/27 15:27

編集2016/05/27 15:54
oskbt

総合スコア1895

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

otftrough

2016/05/28 05:50

ありがとうございます。 cssを書くほうが余計に手間がかかるので、js使います。
guest

0

jquery get color
で google 検索すると情報を得られると思います。
例えば、

...
theColorIs = $('a').css("color");
...

投稿2016/05/27 13:02

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問