Javascript-форум - BackgroundColor по ID

Страница 1 из 4

Последняя »

Показывать 40 сообщений этой темы на одной странице

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;

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

Страница 1 из 4

Последняя »

Показывать 40 сообщений этой темы на одной странице