Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как вывести всю информацию цветов абзацев в одном alert ? (https://javascript.ru/forum/jquery/51755-kak-vyvesti-vsyu-informaciyu-cvetov-abzacev-v-odnom-alert.html)

Phoenix13 18.11.2014 13:43
Как вывести всю информацию цветов абзацев в одном alert ?
 
У меня такой вопрос. Написал код для вывода цвета фонов всех абзацов в alert. По отдельным alert получается вывести но все сразу в одном alert нет. Помогите.
<!doctype html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function (){
$("p").each(function(){
alert($(this).css("background-color"));
});
});
});
</script>
</head>
<body>
<p style = "background-color:red">this is red</p>
<p style = "background-color:green">this is green</p>
<p style = "background-color:blue">this is blue</p>
<button> return </button>
</body>
</html>

Viral 18.11.2014 13:48 
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
  var str = '';
  var p = document.getElementsByTagName('p');
  for(var i = 0; i < p.length; i++){
    str += p[i].getAttribute('style')+'\n';
  }
  alert(str);
}
</script>
</head>
<body>
<p style = "background-color:red">this is red</p>
<p style = "background-color:green">this is green</p>
<p style = "background-color:blue">this is blue</p>
<button> return </button>
</body>
</html>

Phoenix13 18.11.2014 13:50
Спасибо Viral! А как сделать так чтоб КОД цветов вывел в одном alert после нажатия на return?

Viral 18.11.2014 14:05
небольшие правки к предыдущему посту:
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onload = function(){
  var str = '';
  var p = document.getElementsByTagName('p');
  for(var i = 0; i < p.length; i++){
    str += p[i].style.backgroundColor+'\n';
  }
  alert(str);
}
</script>
</head>
<body>
<p style = "background-color:red">this is red</p>
<p style = "background-color:green">this is green</p>
<p style = "background-color:blue">this is blue</p>
<button> return </button>
</body>
</html>


а дальше все просто.. создаешь массив, в котором присваиваешь название каждому коду цвета, ищешь значение, которое возвращает p[i].style.backgroundColor по ключам массива и вешаешь обработчик события клика мыши на свою кнопку.

Phoenix13 18.11.2014 14:11
Ладно попробую.
Просто мне надо было так чтоб цвета выводились в виде кода RGB...скажем (255,128,225) все три в таком виде и в jquery.
Но твой вариант тоже хорош, спасибо.

Phoenix13 18.11.2014 14:53 
<!doctype html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js">
</script>
<script>
	$(document).ready(function(){
		$("button").click(function (){
			$("p").text(function(){
			var color='';
			var p=document.getElementsByTagName('p');
			for(var i = 0; i < p.length; i++){
			color+=$(p[i]).css("background-color")+'\n';
				}
				alert(color);
			});		
		});
	});
</script>
</head>
<body>
<p style = "background-color:red">this is red</p>
<p style = "background-color:green">this is green</p>
<p style = "background-color:blue">this is blue</p>
<button> return </button>
</body>
</html>



Вот как сделал.


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