Q&A
省略した部分が肝心なのに…
tableタグの指定したセルに背景色をつける練習用プログラムを作っています。
下のコード内のfor文で、3列目のセルに青い背景色を設定していますが、cssで設定した黄緑のセルにも青が上塗りされています。
セルが白以外の背景色だった場合に、元の背景色と青との中間色を背景色にしようと思ったのですが、セルの色を取得しようとしても、alert(td[i].style.backgroundColor);ではcssで設定した色を取得できませんでした。
どうすれば取得できますか？
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>
回答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
総合スコア1895
0
jquery get color
で google 検索すると情報を得られると思います。
例えば、
- jQuery Get Elements Color? http://stackoverflow.com/questions/3226302/
...
theColorIs = $('a').css("color");
...
投稿2016/05/27 13:02
総合スコア22328
あなたの回答
tips
プレビュー
