изменить цвет фона и обратно...
Здравствуйте!
Я только начал учиться, экспериментирую, и вот появился такой вопрос: хочу изменить цвет фона элемента 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) может кто подскажет как нужно правильно поступить в данном случае, буду сильно благодарен! :) |
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> |
Спасибо!
А если, всё-таки, использовать не getElementById а event? Просто, сейчас меня интересует, чтобы программа как раз определила по клику к какому элементу я обращаюсь |
Цитата:
http://learn.javascript.ru/event-delegation |
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 нет необходимости |
cesarr,
вариант с делегированием перекрасит и восcтановит прежний цвет у любого div ))) :write: <!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> |
Рони, Огромное спасибо! =)))
|
Всем привет,
хороший скрипт. В продолжении темы: Возникла такая необходимость: есть div1 с динамичной шириной. есть div2 с первоначальной шириной 50% от div1 с зелёным фоном и неизменной шириной. Нужно чтобы при увеличении div1, ширина div2 оставалась неизменной а фон плавно переходил из зелёного в красный. Есть примеры? подскажете? Заранее спасибо! |
semalexandro,
к вашему описанию макет не помешает ... |
Допустим макет такой:
<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> |
Часовой пояс GMT +3, время: 16:55. |