Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   BackgroundColor по ID (https://javascript.ru/forum/dom-window/53473-backgroundcolor-po-id.html)

Zyuzka 05.02.2015 11:58
BackgroundColor по ID
 
Доброе время суток форумчане! Я полный нуб в js:cray: . Хочу попросить у вас подсказки. Есть код:
<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


function test(){
	var divs;
    for(var j = 0; j < 6; j++) {
        divs= document.getElementById('a' + j);
		divs.onclick = function () {
				document.getElementById(this.id).style.backgroundColor = "blue";
                alert("ID элемента" + " " + "'" + this.id + "'");


:help: Проблема в том, что бы по нажатию на DIV предыдущий тоже менял bgColor. Буду благодарен за любые советы и подсказки

рони 05.02.2015 12:27
Zyuzka,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
     function test(){
	var divs,  old;
    for(var j = 0; j < 6; j++) {
        divs= document.getElementById('a' + j);
		divs.onclick = function () {
                old && (old.style.backgroundColor='')
				this.style.backgroundColor = "blue";
                old = this
               }}}

  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>

Zyuzka 05.02.2015 12:33
Цитата:
Сообщение от рони (Сообщение 355123)
Zyuzka,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
     function test(){
	var divs,  old;
    for(var j = 0; j < 6; j++) {
        divs= document.getElementById('a' + j);
		divs.onclick = function () {
                old && (old.style.backgroundColor='')
				this.style.backgroundColor = "blue";
                old = this
               }}}

  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>
Почти=) Но нужно что бы по нажатию на "а3" цвет "blue" применялся и на "a2","a1","a0"

рони 05.02.2015 12:41
Zyuzka,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "blue"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundColor = color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>

Zyuzka 05.02.2015 12:45
Цитата:
Сообщение от рони (Сообщение 355126)
Zyuzka,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "blue"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundColor = color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>
Спасибо огромное!

Zyuzka 05.02.2015 15:05
Цитата:
Сообщение от рони (Сообщение 355126)
Zyuzka,
:-? 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "blue"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundColor = color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>
Возникла новая проблема:cray: . Как прикрепить
background: linear-gradient(to right, blue 50%, white 50%);

к элементу по которому кликнули?

рони 05.02.2015 15:36
Цитата:
Сообщение от Zyuzka
к элементу по которому кликнули?
к элементу или ко всем что выше?

рони 05.02.2015 15:51
Zyuzka,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "linear-gradient(to right, blue, white)"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>
<body onload="test()">
	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>
</html>

рони 05.02.2015 15:55
Zyuzka,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "linear-gradient(to right, blue, blue)"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue, white)" : color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>
<body onload="test()">
	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>
</html>

Zyuzka 05.02.2015 17:47
Цитата:
Сообщение от рони (Сообщение 355221)
Zyuzka,
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "linear-gradient(to right, blue, blue)"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue, white)" : color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>
<body onload="test()">
	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>
</html>
Да это то что надо! Спасибо большое ещё раз.
Осталось понять строку 
divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue, white)" : color;
:)

freee 06.02.2015 02:40 
<html>
<head>
</head>
<body>

    <div id="a0">1</div>
    <div id="a1">2</div>
    <div id="a2">3</div>
    <div id="a3">4</div>
    <div id="a4">5</div>
    <div id="a5">6</div>

<script>

divs=document.querySelectorAll("div")
f=function () {
   var n=(+this.id[1])
   ;[].forEach.call(divs, function(div){div.style.background=(+div.id[1]<=n) ? "blue" : ""}) 
}
;[].forEach.call(divs, function(div){div.onclick=f})

</script>

</body>
</html>

Zyuzka 06.02.2015 09:58
Цитата:
Сообщение от freee (Сообщение 355316) 
<html>
<head>
</head>
<body>

    <div id="a0">1</div>
    <div id="a1">2</div>
    <div id="a2">3</div>
    <div id="a3">4</div>
    <div id="a4">5</div>
    <div id="a5">6</div>

<script>

divs=document.querySelectorAll("div")
f=function () {
   var n=(+this.id[1])
   ;[].forEach.call(divs, function(div){div.style.background=(+div.id[1]<=n) ? "blue" : ""}) 
}
;[].forEach.call(divs, function(div){div.onclick=f})

</script>

</body>
</html>
В этом примере я вообще ничего не понял

рони 06.02.2015 10:32
Цитата:
Сообщение от Zyuzka
В этом примере я вообще ничего не понял
теже два цикла плюс нелюбовь к var и ограничение: не более 9 элементов )))
вот вам ещё вариант через замыкание, чтоб не доставать данные из id (количество строк любое наличие id необязательно)
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<script>

var d = document.querySelectorAll("div"),
    f = function(a) {
        return function() {
            [].forEach.call(d, function(b, c) {
                b.style.background = a >= c ? "blue" : ""
            })
        }
    };
[].forEach.call(d, function(a, b) {
    a.onclick = f(b)
});

</script>
</body>

</html>

Zyuzka 06.02.2015 10:46
Цитата:
Сообщение от рони (Сообщение 355339)
теже два цикла плюс нелюбовь к var и ограничение: не более 9 элементов )))
вот вам ещё вариант через замыкание, чтоб не доставать данные из id (количество строк любое наличие id необязательно)
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<script>

var d = document.querySelectorAll("div"),
    f = function(a) {
        return function() {
            [].forEach.call(d, function(b, c) {
                b.style.background = a >= c ? "blue" : ""
            })
        }
    };
[].forEach.call(d, function(a, b) {
    a.onclick = f(b)
});

</script>
</body>

</html>
Сейчас буду разбирать=) Спасибо.
В итоге у меня вышло вот так
<!DOCTYPE HTML>

<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
  header{
	width: 225px;
	height: 17px;
	border: 1px solid black;
	}
  header>div{width: 13px;
	height: 15px;
	border:1px solid black;
	background-color:white;
	margin-left:0px;
	float:left;
	}
  </style>
  <script>
	function test() {
         var divs;
         for (var j = 0; j < 15; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "linear-gradient(to right, blue, blue)"
                 for (var j = 0; j < 15; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue 50%, white 50%)" : color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>

<body onload="test()">
	<header>
	<div id="a0">10</div>
	<div id="a1">11</div>
	<div id="a2">12</div>
	<div id="a3">13</div>
	<div id="a4">14</div>
	<div id="a5">15</div>
	<div id="a6">16</div>
	<div id="a7">17</div>
	<div id="a8">18</div>
	<div id="a9">19</div>
	<div id="a10">20</div>
	<div id="a11">21</div>	
	<div id="a12">22</div>	
	<div id="a13">23</div>
	<div id="a14">24</div>
	</header>
</body>


</html>

Теперь думаю как вынести текст из div'ов над ними и по клику на текст красилась ячейка

рони 06.02.2015 11:02
Zyuzka,
не копируйте код в своё сообщениее целиком это засоряет просмотр.
Цитата:
Сообщение от Zyuzka
Теперь думаю как вынести текст из div'ов над ними и по клику на текст красилась ячейка
не понял

Zyuzka 06.02.2015 11:14
Цитата:
Сообщение от рони (Сообщение 355347)
Zyuzka,
не копируйте код в своё сообщениее целиком это засоряет просмотр.

не понял
В моём коде div'ы выстроены inline-block'ом. Весь header представляет собой слайдер=) Div'ы сейчас текст который означает "час времени". Мне нужно этот текст вынести из div над ним, что бы по клику на текст цвет менялся у div к которому он принадлежит. Пока всё что я надумал это в header'е сделать ещё такую же полосу из div и как то их связать.
Пример:
<header>
    <div class="time">10</div>
    <div class="time">11</div>
    <div class="time">12</div>
    <div class="time">13</div>
    <div class="time">14</div>
    <div class="time">15</div>
	<div id="a0"></div>
	<div id="a1"></div>
	<div id="a2"></div>
	<div id="a3"></div>
	<div id="a4"></div>
	<div id="a5"></div>
	</header>

рони 06.02.2015 12:23
Zyuzka,
не осилил )))
сделайте лучше пример того что хотите получить в результате

Zyuzka 06.02.2015 12:31
Цитата:
Сообщение от рони (Сообщение 355351)
Zyuzka,
не осилил )))
сделайте лучше пример того что хотите получить в результате
:) Наша функция
function test() {
         var divs;
         for (var j = 0; j < 15; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function () {
                 var color = "linear-gradient(to right, blue, blue)"
                 for (var j = 0; j < 15; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue 50%, white 50%)" : color;
                     if (divs == this) color = '';
                 }
             }
         }
     }


<div id="h0">10</div>
	<div id="h1">11</div>
	<div id="h2">12</div>
	<div id="h3">13</div>

        <div id="a0"></div>
	<div id="a1"></div>
	<div id="a2"></div>
	<div id="a3"></div>

Сейчас bgColor срабатывает для div id(a+j) по клику на div id(a+j). Нужно срабатывание для div id(a+j) по клику на div id(h+j). При этом bgColor div c id(h+j) не должен меняться

Zyuzka 08.02.2015 16:36
up теме:(

рони 08.02.2015 16:39
Zyuzka,
либо я вас не понял либо вам нужно заменить в 4 строке a на h

Zyuzka 08.02.2015 16:53
Цитата:
Сообщение от рони (Сообщение 355659)
Zyuzka,
либо я вас не понял либо вам нужно заменить в 4 строке a на h
Если мы заменяем "a" на"h", красятся все div'ы с id "a". А нужно что бы по нажатию на h0 красился a0, h1-->a0,a1, h2--> a0,a1,a1 и т.д.

рони 08.02.2015 17:12
Zyuzka,
сделайте html

Zyuzka 08.02.2015 17:20
Цитата:
Сообщение от рони (Сообщение 355667)
Zyuzka,
сделайте html
 
<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <style type="text/css">
  header{
	width: 225px;
	height: 32px;
	border: 1px solid black;
	}
  header>div{width: 13px;
	height: 15px;
	border:1px solid black;
	background-color:white;
	float:left;
	cursor: default;
	}
.time{border:0;
	width: 15px;
		}
  </style>
  <script>
	function test() {
         var divs;
         for (var j = 0; j < 15; j++) {
             divs = document.getElementById('h' + j);
             divs.onclick = function () {
                 var color = "linear-gradient(to right, blue, blue)"
                 for (var j = 0; j < 15; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue 50%, white 50%)" : color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>

<body onload="test()">
	<header>
    <div class="time" id="h0">10</div>
    <div class="time" id="h1">11</div>
    <div class="time" id="h2">12</div>
    <div class="time" id="h3">13</div>
    <div class="time" id="h4">14</div>
    <div class="time" id="h5">15</div>
    <div class="time" id="h6">16</div>
    <div class="time" id="h7">17</div>
    <div class="time" id="h8">18</div>
    <div class="time" id="h9">19</div>
    <div class="time" id="h10">20</div>
    <div class="time" id="h11">21</div>
    <div class="time" id="h12">22</div>
    <div class="time" id="h13">23</div>
    <div class="time" id="h14">24</div>
	<div id="a0"></div>
	<div id="a1"></div>
	<div id="a2"></div>
	<div id="a3"></div>
	<div id="a4"></div>
	<div id="a5"></div>
	<div id="a6"></div>
	<div id="a7"></div>
	<div id="a8"></div>
	<div id="a9"></div>
	<div id="a10"></div>
	<div id="a11"></div>	
	<div id="a12"></div>	
	<div id="a13"></div>
	<div id="a14"></div>
	</header>
</body>


</html>

рони 08.02.2015 17:35
Zyuzka,
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        header {
            width: 225px;
            height: 32px;
            border: 1px solid black;
        }
        header>div {
            width: 13px;
            height: 15px;
            border: 1px solid black;
            background-color: white;
            float: left;
            cursor: default;
        }
        .time {
            border: 0;
            width: 15px;
        }
    </style>
    <script>
        function test() {
            var divs;
            for (var j = 0; j < 15; j++) {
                divs = document.getElementById('h' + j);
                divs.onclick = function(j) {
                    return function() {
                        var color = "linear-gradient(to right, blue, blue)"
                        for (var i = 0; i < 15; i++) {
                            divs = document.getElementById('a' + i);
                                                        divs.style.backgroundImage = j == i ? (color = '',"linear-gradient(to right, blue 50%, white 50%)") : color;
                        }
                    }
                }(j)
            }

        }
    </script>
</head>


<body onload="test()">
    <header>
        <div class="time" id="h0">10</div>
        <div class="time" id="h1">11</div>
        <div class="time" id="h2">12</div>
        <div class="time" id="h3">13</div>
        <div class="time" id="h4">14</div>
        <div class="time" id="h5">15</div>
        <div class="time" id="h6">16</div>
        <div class="time" id="h7">17</div>
        <div class="time" id="h8">18</div>
        <div class="time" id="h9">19</div>
        <div class="time" id="h10">20</div>
        <div class="time" id="h11">21</div>
        <div class="time" id="h12">22</div>
        <div class="time" id="h13">23</div>
        <div class="time" id="h14">24</div>
        <div id="a0"></div>
        <div id="a1"></div>
        <div id="a2"></div>
        <div id="a3"></div>
        <div id="a4"></div>
        <div id="a5"></div>
        <div id="a6"></div>
        <div id="a7"></div>
        <div id="a8"></div>
        <div id="a9"></div>
        <div id="a10"></div>
        <div id="a11"></div>
        <div id="a12"></div>
        <div id="a13"></div>
        <div id="a14"></div>
    </header>
</body>





</html>

Zyuzka 08.02.2015 17:38
рони,
Огромное спасибо!!!

рони 08.02.2015 17:44
Zyuzka,
убрал строку 38 ))) сейчас она в 37

Zyuzka 18.02.2015 14:19
Хочу добавить выделение текста жирным.Но выделяет только последний элемент. В чём ошибка?
var color = "linear-gradient(to right, blue, blue)";
						var divSlider;
                        for (var i = 0; i < 15; i++) {
                            divsSlider = document.getElementById('a' + i);
							if (j == i){
								divs.style.fontWeight = "bold";
								divsSlider.style.backgroundImage = (color = '',"linear-gradient(to right, blue 50%, white 50%)");
								}
								else {
									divs.style.fontWeight = "";
									divsSlider.style.backgroundImage = color;
									}
                        }

рони 18.02.2015 14:26
Zyuzka,
6 строка и 10 почему divs?

Zyuzka 18.02.2015 14:39
Цитата:
Сообщение от рони (Сообщение 357147)
Zyuzka,
6 строка и 10 почему divs?
Потому что должен меняться текст только divs, а у него document.getElementById('h' + j).

рони 18.02.2015 14:45
Zyuzka,
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        header {
            width: 780px;
            height: 100px;
            border: 1px solid black;
        }
        header>div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: white;
            float: left;
            cursor: default;
        }
        .time {
            border: 0;
            width: 50px;
        }
    </style>
    <script>
        function test() {
            var divs;
            for (var j = 0; j < 15; j++) {
                divs = document.getElementById('h' + j);
                divs.onclick = function(j) {
                    return function() {
                        var color = "linear-gradient(to right, blue, blue)"
                        for (var i = 0; i < 15; i++) {
                            divs = document.getElementById('a' + i);
                            divs.style.backgroundImage = j == i ? (color = '',"linear-gradient(to right, blue 50%, white 50%)") : color;
                            divs.style.fontWeight  = j >= i ? 'bold' : '';
                            divs.style.color  = j >= i ? '#FFFFFF' : '';
                            divs.style.fontSize  = j >= i ? 'larger' : '';
                        }
                    }
                }(j)
            }

        }
    </script>
</head>


<body onload="test()">
    <header>
        <div class="time" id="h0">10</div>
        <div class="time" id="h1">11</div>
        <div class="time" id="h2">12</div>
        <div class="time" id="h3">13</div>
        <div class="time" id="h4">14</div>
        <div class="time" id="h5">15</div>
        <div class="time" id="h6">16</div>
        <div class="time" id="h7">17</div>
        <div class="time" id="h8">18</div>
        <div class="time" id="h9">19</div>
        <div class="time" id="h10">20</div>
        <div class="time" id="h11">21</div>
        <div class="time" id="h12">22</div>
        <div class="time" id="h13">23</div>
        <div class="time" id="h14">24</div>
        <div id="a0">w</div>
        <div id="a1">w</div>
        <div id="a2">w</div>
        <div id="a3">w</div>
        <div id="a4">w</div>
        <div id="a5">w</div>
        <div id="a6">w</div>
        <div id="a7">w</div>
        <div id="a8">w</div>
        <div id="a9">w</div>
        <div id="a10">w</div>
        <div id="a11">w</div>
        <div id="a12">w</div>
        <div id="a13">w</div>
        <div id="a14">w</div>
    </header>
</body>





</html>

рони 18.02.2015 14:49
Zyuzka,
ок h! :) 
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        header {
            width: 780px;
            height: 100px;
            border: 1px solid black;
        }
        header>div {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: white;
            float: left;
            cursor: default;
        }
        .time {
            border: 0;
            width: 50px;
        }
    </style>
    <script>
        function test() {
            var divs;
            for (var j = 0; j < 15; j++) {
                divs = document.getElementById('h' + j);
                divs.onclick = function(j) {
                    return function() {
                        var color = "linear-gradient(to right, blue, blue)"
                        for (var i = 0; i < 15; i++) {
                            divs = document.getElementById('a' + i);
                            var h = document.getElementById('h' + i)
                            divs.style.backgroundImage = j == i ? (color = '',"linear-gradient(to right, blue 50%, white 50%)") : color;
                            h.style.fontWeight  = j >= i ? 'bold' : '';
                            h.style.color  = j >= i ? '#0000FF' : '';
                            h.style.fontSize  = j >= i ? 'larger' : '';
                        }
                    }
                }(j)
            }

        }
    </script>
</head>


<body onload="test()">
    <header>
        <div class="time" id="h0">10</div>
        <div class="time" id="h1">11</div>
        <div class="time" id="h2">12</div>
        <div class="time" id="h3">13</div>
        <div class="time" id="h4">14</div>
        <div class="time" id="h5">15</div>
        <div class="time" id="h6">16</div>
        <div class="time" id="h7">17</div>
        <div class="time" id="h8">18</div>
        <div class="time" id="h9">19</div>
        <div class="time" id="h10">20</div>
        <div class="time" id="h11">21</div>
        <div class="time" id="h12">22</div>
        <div class="time" id="h13">23</div>
        <div class="time" id="h14">24</div>
        <div id="a0">w</div>
        <div id="a1">w</div>
        <div id="a2">w</div>
        <div id="a3">w</div>
        <div id="a4">w</div>
        <div id="a5">w</div>
        <div id="a6">w</div>
        <div id="a7">w</div>
        <div id="a8">w</div>
        <div id="a9">w</div>
        <div id="a10">w</div>
        <div id="a11">w</div>
        <div id="a12">w</div>
        <div id="a13">w</div>
        <div id="a14">w</div>
    </header>
</body>





</html>

Zyuzka 18.02.2015 14:53
рони,
Это у меня получалось=) У меня не получается проверка с верхними div'ами. При нажатии по любому из них он остается таким же. А по нажатию на последний "h14" он становится "bold". Такое чувство как будто сравнивает только последний j и i.

Zyuzka 18.02.2015 14:54
рони,
Вот оно. Спасибо огромное=)

Zyuzka 18.02.2015 14:55
рони,
Не пойму только почему if не видет divs, если он глобальный?

рони 18.02.2015 15:03
Zyuzka,
1 внутри свой divs потому что var
2 внешний цикл перебора строка 30 никак не связан с перебором внутри функции строка 35.

Zyuzka 18.02.2015 15:29
А теперь как сделать что бы предыдущие не становились Bold?

рони 18.02.2015 15:36
Цитата:
Сообщение от Zyuzka
А теперь как сделать что бы предыдущие не становились Bold?
изменить 1 символ

Zyuzka 18.02.2015 15:40
Сам затупил. Ставил = вместо ==


Часовой пояс GMT +3, время: 03:10.