Jedním z (vnímaných) záludných úkolů v rámci frontendového kódování je kontrola, zda je prvek viditelný nebo ne. Velmi naivní způsob, jak zkontrolovat, zda je prvek viditelný (tj. zda je přítomen nebo zabírá místo na stránce), je kontrola jeho hodnoty stylu zobrazení:
var incorrectIsVisible = window.getComputedStyle(someElement, null).getPropertyValue('display'); // "inline", "inline-block", "block", etc.
Všimněte si, že nejsem zkontrolovat také neprůhlednost, protože neviditelný prvek stále zabírá místo na obrazovce. Problém s výše uvedeným kódem je, že můžete získat styl potomka, ale to nemusí záležet, pokud je jeho rodič nastaven na display: none . Pokud je například display dítěte hodnota stylu je inline-block , ale nadřazený prvek prvku display styl je none , podřízený prvek stále není viditelný. Kupodivu kontrola offsetHeight podřízeného prvku hodnota bude signalizovat, pokud je prvek pravděpodobně viditelný:
var correctIsVisible = someElement.offsetHeight; // 0 for hidden, more than 0 for displaying
Pokud je prvek potomkem prvku, který je display: none , offsetHeight bude 0, takže víte, že prvek není viditelný navzdory jeho display hodnota. Opět si pamatujte, že se nebere v úvahu neprůhlednost a prvek, který je opacity: 0 je stále technicky viditelný a zabírá místo.