Напишите свой небольшой js-фреймворк работы с css классами dom элементов. Итоговая функциональность и интерфейсы отдаются на ваше усмотрение.

Добавьте at.js к проекту:

<script type="text/javascript" src="at.js"></script>

at.js позволяет выбирать элементы по id или классу. Как и в jQuery, выбор элементов производится следующим образом:

at('#testId'); или at('.testClass');

Методы используются следующим образом: at('#testId').doSomething(). Они также могут быть связаны: at('#testId').doSomething().doSomethingElse().

Устанавливает аттрибут val как свойство value элемента.

Устанавливает содержание элемента на content.

Сбрасывает свойство display (показывает элемент).

Устанавливает свойство display элемента как hidden (прячет элемент).

Переключает видимость элемента.

Устанавливает цвет элемента. Тип value - String.

Устанавливает фоновый цвет элемента. Тип value - String.

Устанавливает высоту элемента. Тип value - Number.

Устанавливает ширину элемента. Тип value - Number.

Устанавливает высоту и ширину элемента. Тип height и width - Number.

Устанавливает размер шрифта элемента. Тип value - Number.

Устанавливает поля элементов. Тип параметров - Number. Перенимает функциональность CSS с разным количеством параметров. (Например, at.('#testId').margin(10, 0, 25) установит верхнее поле на 10px, боковые на 0, и нижнее на 25px.)

Устанавливает отступы элементов. Тип параметров - Number. Перенимает функциональность CSS с разным количеством параметров. (Например, at.('#testId').padding(10, 0, 25) установит верхний оступ на 10px, боковые на 0, и нижний на 25px.)

===============

Регистрирует обработчик события click. Используется следующим образом:

at('#testId').click(function() {
  at('#anotherId').color('red');
});

Регистрирует обработчик события mouseover. Используется следующим образом:

at('#testId').mouseover(function() {
  at('#anotherId').color('red');
});

Регистрирует обработчик события mouseout. Используется следующим образом:

at('#testId').mouseout(function() {
  at('#anotherId').color('red');
});