Как да се приложи универсални функции показват и да се скрият на DOM елемент? Има няколко често срещани опции, с разнообразие от рейк, което ще разгледаме и да изберете най-добрия.
Помислете за една много проста функция за превключване:
Недостатъците на този подход е лесно да се види. Например, връзки разполага с дисплей по подразбиране: инлайн. И сложи този код дисплей = "блок".
За да проверите - кликнете върху всяко място, на жълтата DIV. в този случай тя ще се нарича превключване връзки. И след това - кликнете отново, за да превключите.
Както можете да видите, това крие нормално, но шоуто - невалидна.
Подобен проблем е с клетките на таблицата, в която при стандартна езика: маса клетка.
Този проблем е лишен от следните опции:
Вместо да блокира дисплей имот се нулира - в същото време получава елемент на дисплея на СГО по подразбиране, което означава, че този, който първоначално е бил:
Както можете да видите, всичко работи правилно.
Но това повдига и друг проблем. показване на собственост на един елемент може да се различава от наследството на СГО, например:
В този случай, нула дисплей нулиране е от особено значение.
За по-добра приложимост превключване се разделят на две части: шоу и да се скрият, както и отстраняването им поотделно.
За да се заобиколи по-горе проблем с презаписване дисплей - с скрити предмети ще запише старата стойност в атрибута дисплей el.displayOld. и по време на изложението - да се възстанови.
Сега покажете / скриете за връзки с вашия дисплей да работи правилно.
Въпреки това, този вариант - не повече от едно междинно за нас.
скрий функция работи добре. За това шоу не казвай.
- На първо място, пред предизвикателството да покажем скрий нулиране на дисплея. Това поведение - неправилно, това трябва да се коригира.
- На второ място, и по-важното, ако елементът е скрита, класът на CSS, а след това се покаже, че няма да се появи.
Например, шоу няма да се покаже връзка от този пример:
За да се реши този проблем, показват За функцията трябва да знае дали даден елемент е истински или не се показва. Това ще ни помогне да направи достъпа до компютърна Style - изчислява елемент стил, достъпът до които се осъществява по различни начини, в зависимост от браузъра.
Следната функция отнема дисплей реална стойност на изчислените стил, тогава няма да има. който се получава чрез използването на CSS-класове и свойства.
Ако елементът не се показва в резултат на CSS класа, getRealDisplay връща "няма" за него.
Вие може да искате да премахнете тази линия, за да се оптимизира, за да направи шоуто по-бързо.
Но това шоу няма да работи правилно, когато се нарича без предварително скрий артикул с нестандартен дисплей.Къде можете да получите стойността на дисплея, за да покаже първоначално скрит елемент? Не е задължително да блокира. защото елемент може да бъде препратка, клетките на таблицата, и като цяло - "правилната" дисплея, за да покаже елемент зависи от времето, мястото и настроението на програмист.
В блок (3.2), функцията поставя елемент със същия маркер до края
и получава своя дисплей. който кешира в средното обект displayCache на. Разбира се, това е само предположение, но с прости случаи тя работи.Този дисплей се използва за присвояване на елемента.
- Опитайте се да получите най-точната стойност на дисплея от кеша.
- Кешът не е - добави празен етикет, за да . след това да вземе своя дисплей.
- Ако маркерът има реална дисплей: няма - не успя да се отгатне. Вземете блока. какво друго да направя, след което се показва на елемента.
- предположил стойност елемент дисплей да се прилага и съхранява за бъдеща употреба.
Така че, сега на базата на шоуто и да се скрият, можете да направите функция за превключване. което е видно елемент кожи и невидим - напротив, шоу програми. С други думи, тя се променя състоянието на елемента.
превключване самата функция е много проста:
За нея работа изисква допълнителна функция isHidden. който определя дали елементът е видима. Разбира се, ние имаме предвид наистина да видим, а не елемент на дисплея собственост.
Ние се използва този трик offsetWidth / offsetHeight:
Това изпълнение се опитва да получи отговор, доколкото е възможно с помощта на чек offsetWidth / offsetHeight. защото то е по-бързо от getRealDisplay.
Така че, тук е окончателния код toggle.js.
Един пример от работата може да се види на отделна страница.
Този многостранен функция за превключване се използва широко в различни библиотеки, особено в JQuery.
А знаеш ли, че той прави редица ненужни операции, както и ако внезапно ви превключване zaglyuchit - представете си какво може да е причината.
Нека ви превключване винаги работи по предназначение!
- версия за печат
Свързани статии