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 ) }


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