V tomto článku predstavím riešenie, ktoré zisťuje, či sa daný element nachádza vo vnútri iného elementu. Na detekciu root elementu použijem CSS selectory class a id. Príklad je vhodný napríklad ak vyhľadávate dáky viditeľný node. Viditeľný sa tým myslí, že má vlastnosť visibility : visible a display nemá none. No nezobrazuje sa preto, lebo niektorý z nadradených elementov je skrytý napríklad cez triedu .hide. V tomto prípade sa stáva node neviditeľným.Vyhľadávanie sa bude vykonávať až po element <body>. Vstupnými argumentmi sú node, ktorému zisťujeme viditeľnosť a trieda alebo id, ktoré rušia viditeľnosť. Na záver je vytvorený test funkcionality.Príklad: Vytvorenie testovacieho stromu.
Nasledujúci príklad je zjednodušením predchádzajúceho. V tomto prípade zisťujem, či element je súčasťou dákeho elementu, ktorý je skrytý cez triedu hide. Výsledkom je to, že daný element kvôli skrytému parentovi nie je viditeľný.Príklad: Detekcia, či je element viditeľný.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function isNodeVisible(node, className){
className = className ? className : "hide";
var visible = true;
var parent = node;
while (parent && parent.nodeName !=="BODY"){
parent = parent.parentNode;
if(parent.classList.contains(className)){
visible = false;
break;
}
}
return visible;
}
Uvedený mechanizmus je možné ešte upraviť napríklad o testovanie virtuálnych uzlov či vlastností visibility a display. Nasledujúci príklad zahrňuje spomenuté možnosti. Príklad: Detekcia, či je element viditeľný.
Okrem triedy hide je možné použiť aj inú triedu. Uvedená technika je vhodná, ak sa pracuje so šablónami (templates) obsahujúcimi viacero panelov (panes), kde jeden je zobrazený a ostatné sa skrývajú. 22.12.2016 (aktualizované 6.2.2017), Matej LednárKategória: JavaScriptJavaScript,traverse,DOM,selector,CSS,parent,hidden,display,none,Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.Viac informácií nájdete v sekcii O projekte.