Динамические aTrueShadows

На днях получил письмо с вопросами по моей веб-библиотеке теней aTrueShadows, а я думал ею и не пользуется никто :-). Андрей Федосеев интересовался, как тень у элемента можно динамически включать-выключать.

Тени подключаются к элементу очень просто: достаточно добавить ему класс "shadow". Логично было бы предположить, что убрав класс, тень можно убрать. Ан, нет!

Дело в том, что этот самый класс "shadow" нужен только для того, чтобы подключить к элементу XBL-binding:

.shadow {
  -moz-binding:url('trueshadows.xml#shadow');
}

... и если его просто убрать, то binding останется. Это не случайно.

Binding представляет собой описание некоторой вложенной в элемент древовидной структуры подэлементов, к которым еще и скрипты привязываются. Фактически binding может полностью поменять все отображение и поведение элемента. Например, в Gecko-браузерах поведение тега "marquee" целиком реализовано через binding на основе самого обычного блока.

В aTrueShadows для создания тени я включаю в элемент дополнительные блочки для разных участков тени (5 штук), а потом применяю к нему жуткого вида конструктор, который корежит переназначает его внутренние стили так, чтобы тень лежала ровно практически при любых схемах позиционирования, заданных для исходного элемента. Понятно, что результат работы какого-то произвольного кода автоматически отменить нельзя. Поэтому применение binding'а в общем случае необратимо.

Однако, проблему я все-таки решил. Структура тени пусть остается у элемента навсегда, но ведь ее можно просто скрыть CSS'ом. Что я и сделал в новой версии: дописал в стили новый класс "hiddenshadow", по которому всем блочкам тени ставится display:none. Теперь для того, чтобы скрыть динамически тень достаточно приписать этот класс элементу:

<div ... onmouseout="this.className+=' hiddenshadow'">...</div>

Спасибо Андрею за наводку!