Javascript-форум - Получение кода цвета области.

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Получение кода цвета области. (https://javascript.ru/forum/events/15017-poluchenie-koda-cveta-oblasti.html)

schwind

09.02.2011 22:51

Получение кода цвета области.

Задача следующая: при нажатии на ячейку таблицы на экран выводится сообщение с кодом цвета в формате #RRGGBB.
В принципе, по событию вывести alert не проблема, только не могу сообразить, каким образом получить все-таки это значение, то есть как будто пипеткой взять образец цвета и присвоить это значение некой переменной.

Gvozd

09.02.2011 22:59

вам нужен цвет любого произвольного пикселя?
или достаточно цвет фона ячейки, например?

schwind

10.02.2011 21:47

Достаточно цвета фона ячейки. Лабораторку надо сдать, а я что-то зависла.

Gvozd

10.02.2011 23:11

а что именно не получается?
повесить событие?
а CSS-свойства HTML-объекта доступны в свойстве style

<div style="background-color:#FF0000;" onclick="alert(this.style.backgroundColor)">
qwe</div>

Маэстро

11.02.2011 12:49

Цитата:

Сообщение от Gvozd (Сообщение 91919)

а что именно не получается?

Тут ключевое слово "пипетка" ;)
Очевидно ей надо кликнув мышкой в точку любой таблицы вытянуть цвет ячейки, т.е. сначала по клику надо получить объект, а потом взять его backgroundColor (при отсутствии функции onclick на данном объекте). Но, может я и ошибаюсь... девушка ведь не разъясняет подробнее...

schwind

11.02.2011 13:00

Спасибо! Хотя бы какая-то оптимизация. Только цвет каждого придется поменять, остальное простым копированием.
Задание вот какое:

schwind

11.02.2011 13:11

То есть onclick все-таки прописывается, а

Цитата:

Сообщение от Маэстро (Сообщение 92000)

кликнув мышкой в точку любой таблицы вытянуть цвет ячейки

- это действие отдельной программы, типа 3c. А вообще-то из предложенного кода уже можно что-то слепить. Бегу пробовать.

Маэстро

11.02.2011 13:15

Не забудьте, что разные броузеры по-разному возвращают код цвета. Одни в формате #RRGGBB, а другие в формате rgb(rrr,bbb,ccc). Потребуется функция приведения к единому формату. Вот (только у меня здесь удаляется символ решетки #):

function RGBColorStrToHEX(color)
// преобразовывает rgb(255,255,255) или rgb(100%,100%,100%) в FFFFFF.
// расширяет сокращенную шеснадцатиричную запись цвета в полную, например, #FAE в FFAAEE.
// возвращает шестнадцатиричное значение цвета БЕЗ ведущего символа # и в верхнем регистре
{
color = color.replace(/\s/g,"");
var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);

if(aRGB)
 {
 color = '';
 for (var i=1;  i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
 }
else
 {
 color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
 color = color.replace(/#/, '');
 }

return color.toUpperCase();
}

schwind

11.02.2011 14:15

Причем код-то должен быть достаточно простым, это же первая лабораторка по JS

Aetae

11.02.2011 16:14

Думаю там ток на ие провряют(так как без regexp'ов кроссбраузерно хоть и получестя но будет маразматично).)
Так что если совсем просто то:

Пример: Internet Explorer only

document.onclick=function() { alert( window.event.srcElement.style.backgroundColor ) }

schwind

11.02.2011 20:54

Короче, я полная дура, ничего у меня не получается, какого фига связалась с этими курсами...:cray: Только бы зачет сдать каким-нибудь чудом...

Aetae

11.02.2011 22:33

Хотя как вариант использовать не style, а bgcolor y td. В таком случае и ff выводит в как надо))

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>  

<table><tr>
<td bgcolor="#FF0000">___</td>
<td bgcolor="#00f">___</td>
<td bgcolor="green">___</td>
</tr></table>

<script>
document.getElementsByTagName('table')[0].onclick=function(e){
 e=e?e.target:window.event.srcElement;
 if(e.tagName=='TD')alert(e.bgColor)
}
</script>
  
</body>
</html>

schwind

12.02.2011 07:49

Ура, ура, ура! Спасибо огромное!

<head>


</head>
<body>

<table border="1" width=20% height=60%>
 <tr>
  <td bgcolor="#ff0000"></td>
  <td bgcolor=#cc0000>
</td>
<td bgcolor="#990000"></td>
  <td bgcolor="#660000"></td>
<td bgcolor="#330000"></td>
  <td bgcolor="#000000"></td>
 </tr>
 <tr>
  <td bgcolor="#ff0033"></td>
  <td bgcolor="#cc0033"></td>
<td bgcolor="#990033"></td>
  <td bgcolor="#660033"></td>
<td bgcolor="#330033"></td>
  <td bgcolor="#000033"></td>
 </tr>
 <tr>
  <td bgcolor=#FF0066></td>
  <td bgcolor=#cc0066></td>
<td bgcolor=#990066></td>
  <td bgcolor=#660066></td>
<td bgcolor=#330066></td>
  <td bgcolor=#000066></td>
 </tr>

 <tr>
  <td bgcolor="#ff0099"></td>
  <td bgcolor="#cc0099"></td>
<td bgcolor="#990099"></td>
  <td bgcolor="#660099"></td>
<td bgcolor="#330099"></td>
  <td bgcolor="#000099"></td>
 </tr>
 <tr>
  <td bgcolor="#ff00cc"></td>
  <td bgcolor="#cc00cc"></td>
<td bgcolor="#9900cc"></td>
  <td bgcolor="#6600cc"></td>
<td bgcolor="#3300cc"></td>
  <td bgcolor="#0000cc"></td>
 </tr>
 <tr>
  <td bgcolor="#ff00ff"></td>
  <td bgcolor="#cc00ff"></td>
  <td bgcolor="#9900ff"></td>
  <td bgcolor="#6600ff"></td>
  <td bgcolor="#3300ff"></td>
  <td bgcolor="#0000ff"></td>
 </tr>
</table>
<script>

document.getElementsByTagName('table')[0].onclick=function(e){

 e=e?e.target:window.event.srcElement;

 if(e.tagName=='TD')alert(e.bgColor)

}

</script>

</body>

Только для остальных таблиц осталось сделать то же самое, а то для первой работает, а для других нет .

schwind

12.02.2011 08:34

Все, сделала, прописала скрипты с номерами для всех таблиц, и все заработало. Работает в Опере, Хроме и Мозилле, а в ИЕ нет. Просто отображается код. Надеюсь, препод не будет прикапываться...

schwind

19.02.2011 20:24

Все, сдала.

<head>
<title>colrtable</title>
<style>
table td{
	width:20px;
	height:20px;
}
</style>
</head>
<body>
<script language='javascript'>
for(i=00;i<166;i=i+33){
	document.write('<table>');
	for(j=00; j<166; j=j+33){
document.write('<tr>');
		for(k=00; k<166; k=k+33){var color = i.toString(16)+""+j.toString(16)+""+k.toString(16);
			document.write('<td onclick="alert(\'#'+color+'\');"bgcolor=#'+color+'></td>');
		}
		document.write('</tr>');
	}
	document.write('</table><br /><br />');
}
</script>
</body>

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