Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   BackgroundColor по ID (https://javascript.ru/forum/dom-window/53473-backgroundcolor-po-id.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, время: 22:20.