Форум

cesarr · #1 (**permalink**) 08.01.2014, 22:25

Здравствуйте!
Я только начал учиться, экспериментирую, и вот появился такой вопрос: хочу изменить цвет фона элемента div по клику на нём, и вернуть обратно по второму клику, для чего написал такой, наверное очень странный, код:

<script>
            function selector(e) {
                event = e || window.event;
                var t = event.target || event.srcElement;
                var color = t.style.backgroundColor;
                if (t.style.backgroundColor != 'white') {
                    t.style.backgroundColor = 'white';
                    xcolor = color;
                }
                else t.style.backgroundColor = xcolor;
            }
        </script>

применяю его к div, который в свою очередь содержит несколько div. разных цветов.
Работает нормально пока изменяю цвет в белый и обратно для каждого div по отдельности, но когда сначала меняю цвет в белый для неск. div и только потом начинаю менять обратно то получается один цвет для всех (из-за того, что xcolor сохранил значение последнего измененного div)

может кто подскажет как нужно правильно поступить в данном случае, буду сильно благодарен!

cyber · #2 (**permalink**) 08.01.2014, 22:30

cesarr,

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>
    <div id="t"> click me </div>
    
    <script>

    var elem = document.getElementById("t");
      
      t.onclick = function () {
       
        if(this.style.backgroundColor)
          this.style.backgroundColor = "";
          
        else 
           this.style.backgroundColor = "red";
      
      }


    </script>

  </body>
</html>

cesarr · #3 (**permalink**) 08.01.2014, 22:43

Спасибо!
А если, всё-таки, использовать не getElementById а event? Просто, сейчас меня интересует, чтобы программа как раз определила по клику к какому элементу я обращаюсь

cyber · #4 (**permalink**) 08.01.2014, 22:46

Сообщение от cesarr

чтобы программа как раз определила по клику к какому элементу я обращаюсь

принцип изменения цвета, а как обрабатывать события читайте тут
http://learn.javascript.ru/event-delegation

рони · #5 (**permalink**) 08.01.2014, 23:43

cesarr,
вариант ...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <style type="text/css">
  #w,#z{background:#FF0;border:#000000 1px dashed;display:inline-block}
  div>div{background:#00F;color:#000;width:60px;margin:8px;float:left;border:#000000 1px dashed}
  div>div:last-child{background:#F00}
  div>div:first-child{background:#FFD700}
  </style>
</head>
<body>
<div id="w">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div id="z">
  <div>4</div>
  <div style="background-color: #00FF00">5</div>
  <div>6</div>
</div>
<script>
var e = document.querySelectorAll("div");
Array.prototype.forEach.call(e, function (b) {
    var d = 0,
        c = window.getComputedStyle ? getComputedStyle(b, "") : b.currentStyle,
        c = c.backgroundColor;
    b.onclick = function (a) {
        a = a || window.event;
        a.stopPropagation ? a.stopPropagation() : a.cancelBubble = !0;
        b.style.backgroundColor = (d ^= 1) ? "white" : c
    }
});
</script>
</body>
</html>

если непрописывать стиль как в теге div=5 вычислять и хранить backgroundColor нет необходимости

рони · #6 (**permalink**) 09.01.2014, 00:54

cesarr,
вариант с делегированием перекрасит и восcтановит прежний цвет у любого div )))

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <style type="text/css">
  #w,#z{background:#FF0;border:#000000 1px dashed;display:inline-block}
  div>div{background:#00F;color:#000;width:60px;margin:8px;float:left;border:#000000 1px dashed}
  div>div:last-child{background:#F00}
  div>div:first-child{background:#FFD700}
  </style>
</head>
<body>
<div id="w">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
<div id="z">
  <div>4</div>
  <div style="background-color: #00FF00">5</div>
  <div>6</div>
</div>
<script>
document.querySelector("body").onclick = function (a) {
    var b = a && a.target || window.event.srcElement;
    if ("DIV" == b.tagName) {
        a.stopPropagation ? a.stopPropagation() : a.cancelBubble = !0;
        a = window.getComputedStyle ? getComputedStyle(b, "") : b.currentStyle;
        a = a.backgroundColor;
        var c, d = b.getAttribute("color");
        b.style.backgroundColor = d ? (c = "", d) : (c = a, "white");
        b.setAttribute("color", c)
    }
};
</script>
</body>
</html>

cesarr · #7 (**permalink**) 09.01.2014, 15:32

Рони, Огромное спасибо! =)))

semalexandro · #8 (**permalink**) 03.04.2017, 17:54

Всем привет,
хороший скрипт. В продолжении темы:
Возникла такая необходимость:
есть div1 с динамичной шириной.
есть div2 с первоначальной шириной 50% от div1 с зелёным фоном и неизменной шириной.
Нужно чтобы при увеличении div1, ширина div2 оставалась неизменной а фон плавно переходил из зелёного в красный.
Есть примеры? подскажете?
Заранее спасибо!

рони · #9 (**permalink**) 03.04.2017, 18:03

semalexandro,
к вашему описанию макет не помешает ...

semalexandro · #10 (**permalink**) 04.04.2017, 09:03

Допустим макет такой:
<style>
.main
{width:100%;
background:#f1f1f1;}

.sub1
{
width:200px;
background:#f7f7f7;
display:inline-block;
}

.sub2
{
display:inline-block;
background:#21a23e;
}
</style>

<div class="main">

<textarea class="sub1">
1
</textarea>
<div class="sub2">
2
</div>
</div>

Форум

Справочник

Discord чат

Курсы javascript