Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2014, 21:25
Новичок на форуме
Отправить личное сообщение для cesarr Посмотреть профиль Найти все сообщения от cesarr
 
Регистрация: 08.01.2014
Сообщений: 3

изменить цвет фона и обратно...
Здравствуйте!
Я только начал учиться, экспериментирую, и вот появился такой вопрос: хочу изменить цвет фона элемента 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)

может кто подскажет как нужно правильно поступить в данном случае, буду сильно благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2014, 21:30
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

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>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2014, 21:43
Новичок на форуме
Отправить личное сообщение для cesarr Посмотреть профиль Найти все сообщения от cesarr
 
Регистрация: 08.01.2014
Сообщений: 3

Спасибо!
А если, всё-таки, использовать не getElementById а event? Просто, сейчас меня интересует, чтобы программа как раз определила по клику к какому элементу я обращаюсь
Ответить с цитированием
  #4 (permalink)  
Старый 08.01.2014, 21:46
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

Сообщение от cesarr
чтобы программа как раз определила по клику к какому элементу я обращаюсь
принцип изменения цвета, а как обрабатывать события читайте тут
http://learn.javascript.ru/event-delegation
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #5 (permalink)  
Старый 08.01.2014, 22:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,379

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 нет необходимости

Последний раз редактировалось рони, 09.01.2014 в 00:23.
Ответить с цитированием
  #6 (permalink)  
Старый 08.01.2014, 23:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,379

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>

Последний раз редактировалось рони, 08.01.2014 в 23:58.
Ответить с цитированием
  #7 (permalink)  
Старый 09.01.2014, 14:32
Новичок на форуме
Отправить личное сообщение для cesarr Посмотреть профиль Найти все сообщения от cesarr
 
Регистрация: 08.01.2014
Сообщений: 3

Рони, Огромное спасибо! =)))
Ответить с цитированием
  #8 (permalink)  
Старый 03.04.2017, 18:54
Новичок на форуме
Отправить личное сообщение для semalexandro Посмотреть профиль Найти все сообщения от semalexandro
 
Регистрация: 03.04.2017
Сообщений: 3

Всем привет,
хороший скрипт. В продолжении темы:
Возникла такая необходимость:
есть div1 с динамичной шириной.
есть div2 с первоначальной шириной 50% от div1 с зелёным фоном и неизменной шириной.
Нужно чтобы при увеличении div1, ширина div2 оставалась неизменной а фон плавно переходил из зелёного в красный.
Есть примеры? подскажете?
Заранее спасибо!
Ответить с цитированием
  #9 (permalink)  
Старый 03.04.2017, 19:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,379

semalexandro,
к вашему описанию макет не помешает ...
Ответить с цитированием
  #10 (permalink)  
Старый 04.04.2017, 10:03
Новичок на форуме
Отправить личное сообщение для semalexandro Посмотреть профиль Найти все сообщения от semalexandro
 
Регистрация: 03.04.2017
Сообщений: 3

Допустим макет такой:
<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменить цвет фона у всех элементов с одинаковым классом bigjoy Events/DOM/Window 10 07.01.2014 11:03
выборка элементов таблицы и цвет фона xber9 jQuery 10 07.08.2013 20:30
Как изменить цвет кнопки, чтобы когда я нажал, то цвет не пропадал? ntest Общие вопросы Javascript 1 31.07.2013 09:14
Изменить цвет текста активной radio button xlebus Общие вопросы Javascript 2 16.04.2012 18:24
изменить цвет фона и запомнить его delias Элементы интерфейса 4 19.03.2010 17:34