Палитра на JavaScript

7.03.2023

Хочу предложить вашему вниманию, очень полезный, на мой взгляд класс, реализованный на JavaScript, который позволяет выбирать цвет из палитры. Класс меняет цвет объекта в данном документе на выбранный из палитры, а также шестнадцатиричное представление цвета, выводит в поле input (text) формы.

Объекты и поля input определяются по их айдишнику (id). Посмотрите пример:

Это тестовый блок, с рыбой вместо текста. То, что вы читаете — это не текст, это просто «Рыба»

#  

#  

#  

Как вы видите, меняется не только цвет текста объекта, но и цвет фона и границ. Короче говоря, цвет любого элемента устанавливаемый с помощью CSS:

  • color
  • backgroundColor
  • borderColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor

Пример:

#

 

?сходный код класса Colors.

Протасов Сергей, Палитра на JavaScript.

 

Этот пример с описанием его работы прислан автором для размещения на hotibo.ru. Подробнее...



Много комментариев (16) к “Палитра на JavaScript”

  1. boombick :

    Респект. Давно хотел такую штуку написать. Только не с фиксированными цветами, а как отображаются палитры в графических редакторах. С градиентами.


    2007-03-07 at 9:45 am
  2. AKS :

    Немного предложений для метода Colors.rgb2hex:
    - после оператора return оператор else теряет всякий смысл, могло бы быть уместным условие типа
    if (rgb.indexOf(’rgb’) > -1)
    - в строке x=’0123456789abcdef’ нет необходимости, будет достаточно n.toString(16).replace(/^(\w)$/,’0$1′)
    - вместо
    var c = rgb.substring(4);
    c = c.substring(0, c.length-1);
    неплохо было бы
    c = rgb.replace(/[rgb\(\)\s]/g, ”).split(’,');
    добавив затем if (c.length != 3) return ‘000000′
    - в цикле не будет лишней проверка
    if (/%/.test(s[i]))


    2007-03-07 at 12:19 pm
  3. Протасов Сергей :

    boombick :

    Поковыряйтесь в коде там все настраивается и цвета и размер паллитры


    2007-03-07 at 3:20 pm
  4. Равалл Светлый :

    Предлагаю вам расширить разработку, введением возможности изменении цвета элемента при навеведении мыши (ака hover)


    2007-03-19 at 6:25 pm
  5. Maxik :

    Да даже без доработок достаточно удобный инструментик получился, спасибо!


    2007-04-04 at 11:37 pm
  6. Александр :

    Ничего скриптик, только неработает если не указать objectId


    2007-09-03 at 9:43 pm
  7. Forexman :

    Спасибо. ?нтересно про класс.


    2007-09-06 at 6:36 pm
  8. Юридическая консультация :

    Этот класс используется здесь:
    Экспорт вопросов бесплатной юридической консультации.

    Если вы используете этот класс, напишите где именно.
    Спасибо.


    2007-10-03 at 7:26 pm
  9. Host :

    спасибо! отличная заметка, очень пригодилось.


    2007-11-15 at 3:52 pm
  10. Батя :

    Спасибо – очень хороший скрипт.


    2007-12-19 at 7:25 pm
  11. Oleg :

    Отлично, спасибо.


    2008-01-11 at 1:11 am
  12. Kaligula :

    Как долго я искал что-то подобное! Прямо в точку. Огромное спасибо!!!


    2008-01-28 at 6:00 pm
  13. btl :

    Слушай, а действительно полезная вещь. Попробовал – понравилось!


    2008-03-18 at 7:35 pm
  14. Deimos :

    В опере не работает, однако. 9.50


    2008-06-09 at 1:27 pm
  15. Man :

    у меня и в 9.51 не пашет!(


    2008-08-29 at 5:01 pm
  16. Дизель генератор :

    “в строке x=’0123456789abcdef’ нет необходимости, будет достаточно n.toString(16).replace(/^(\w)$/,’0$1′)” – очень сомневаюсь в этом!

    А скрипт в Опере и вправду не работает.


    2008-09-15 at 1:31 pm