Кэширование стиля определенного DOM элемента.

[Beckie]

Кэширование стиля определенного DOM элемента.

Как такое реализовать и вообще возможно ли?

Хочу сделать так:

- первой функцией hover, чтобы в переменную добавился текущий цвет фона и поменялся на новый фон

- второй функцией убирался новый фон и ставился предыдущий из переменной

Допустим цвет назначивался скриптом, а нам надо узнать, какой всетаки цвет был использован.

Заранее спасибо!

 

[Mols]

http://docs.jquery.com/CSS/css - как узнать значение и поменять
http://docs.jquery.com/Core/data - как сохранить и потом получить любую информацию

jQuery рулит

 

[Beckie]

Абалдеть!

И вправду, jQuery не перестает удивлять.

Спасибо огромное коллега.

Жаль тут + нельзя ставить.

-~{}~ 28.08.09 22:43:

Теперь другая проблема появилась. И только в IE выкидывает ошибку.

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

Так как у меня на первую функцию hover привязано запоминать цвет фона.

Вот такая вот фигня.

 

[vovanium]

А зачем для этого jquery?

Что проблема добавить новое свойство?
типа

// Сохраняем старое значение и ставим новое
this.style.old_color = this.style.color;
this.style.color = 'red';

// Возвращаем старое
this.style.color = this.style.old_color;

 

[Beckie]

Дело в том, что у меня назначается новый фон всем элементам td, когда курсор попадает в tr.

Да и фон td у всех четных и не четных tr разный.

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

 

[dimagolov]

Beckie, и в чем проблема?

if (typeof this.style.old_color != 'undefined')  this.style.color = this.style.old_color;

 

[Beckie]

Спасибо за наводку. Сделал так:

if(tbody.data("tr_col") != null) {var c_tr = $(this).find('td');c_tr.css("background-color",tbody.data("tr_col").out);}

Все заработало.

 

[vovanium]

Beckie

новый фон всем элементам td, когда курсор попадает в tr.

Такие вещи обычно делаются изменением класса для tr, а не изменением стиля отдельных ячеек

 

[Mols]

без jQuery конечно можно обойтись. Просто jQuery очень удобный инструмент. Или есть религиозные убеждения не использовать удобные инструменты?

 

[vovanium]

Mols

Или есть религиозные убеждения не использовать удобные инструменты?

Инструменты нужно уметь использовать по назначению
А то бывают запущенные случаи, когда вместо того чтобы написать одну строку на чистом JS, подключают JQuery.

 

[Beckie]

Автор оригинала: vovanium
Beckie

Такие вещи обычно делаются изменением класса для tr, а не изменением стиля отдельных ячеек

<tr> нельзя задать фон. Да даже, если и можно было бы как-то, то всё равно отступов между <td> небыло бы видно.

 

[Mols]

так для строки и не надо задавать фон.
Имеется в виду создание CSS правил приблизительно такого вида.

tr.classTR  td.classTD{
...
}


tr.classActiveTR  td.classTD{
...
}

А по наведению на строку менять "classTR" на "classActiveTR"
собственно читаем "селекторы CSS"

 

[Beckie]

Пошел пробовать. Спасибо за разъяснения.

var tbody = tbs.find('tbody');
var tr = tbody.find('tr');

tr.hover(function(){
var c_tr = $(this).find('td');
c_tr.css("background-color","#D2DADA").css("cursor","pointer");
},function(){
var c_tr = $(this).find('td');
if($(this).css() == 'odd') {c_tr.css("background-color","#F0F0F6");}
else {c_tr.css("background-color","");}
});

Конечный вариант.