Vai ir kāds veids, kā es varu pārbaudīt, vai elements ir redzams, izmantojot tikai JS (bez jQuery)?
Piemēram, šajā lapā: Performance Bikes, ja jūs uzbraucat uz piedāvājumiem (augšējā izvēlnē), parādās piedāvājumu logs, bet sākumā tas nebija redzams. Tas ir HTML, bet nav redzams.
Tātad, ja man ir DOM elements, kā es varu pārbaudīt, vai tas ir redzams vai nav? Es mēģināju:
window.getComputedStyle(my_element)['display']);
bet šķiet, ka tas nedarbojas. Interesanti, kurus atribūtus man vajadzētu pārbaudīt. Man nāk prātā:
display !== 'none'
visibility !== 'hidden'
Vai ir vēl kādi citi, kurus es varētu izlaist?
Saskaņā ar šī MDN dokumentāciju, elementa offsetParent
īpašība atgriezīs null
, kad tas vai kāds no tā vecākiem būs paslēpts, izmantojot displeja stila īpašību. Vienkārši pārliecinieties, ka elements nav fiksēts. Skripts, lai to pārbaudītu, ja lapā nav elementu position: fixed;
, varētu izskatīties šādi:
// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
return (el.offsetParent === null)
}
No otras puses, ja jums ir fiksētas pozīcijas elementi, kas varētu tikt iekļauti šajā meklēšanā, jums diemžēl (un lēni) nāksies izmantot `window.getComputedStyle()
. Šādā gadījumā funkcija varētu būt šāda:
// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}
Iespējams, ka 2. variants ir nedaudz vienkāršāks, jo tas ņem vērā vairāk galējo gadījumu, bet es deru derēt, ka tas ir arī daudz lēnāks, tāpēc, ja jums šī darbība jāatkārto daudzas reizes, labāk no tā izvairīties.
Tas var palīdzēt : Paslēpiet elementu, novietojot to galējā kreisajā pozīcijā, un pēc tam pārbaudiet īpašību offsetLeft. Ja vēlaties izmantot jQuery, varat vienkārši pārbaudīt :visible selektoru un iegūt elementa redzamības stāvokli.
HTML :
<div id="myDiv">Hello</div>
CSS :
<!-- for javaScript-->
#myDiv{
position:absolute;
left : -2000px;
}
<!-- for jQuery -->
#myDiv{
visibility:hidden;
}
javaScript :
var myStyle = document.getElementById("myDiv").offsetLeft;
if(myStyle < 0){
alert("Div is hidden!!");
}
jQuery :
if( $("#MyElement").is(":visible") == true )
{
alert("Div is hidden!!");
}
Ja mēs tikai apkopojam pamata veidus, kā noteikt redzamību, ļaujiet man neaizmirst:
opacity > 0.01; // probably more like .1 to actually be visible, but YMMV
Un par to, kā iegūt atribūtus:
element.getAttribute(attributename);
Tātad, jūsu piemērā:
document.getElementById('snDealsPanel').getAttribute('visibility');
Bet ko? Šeit tas nedarbojas. Aplūkojiet to tuvāk, un redzēsiet, ka redzamība tiek atjaunināta nevis kā elementa atribūts, bet gan izmantojot style
īpašību. Tā ir viena no daudzajām problēmām, mēģinot darīt to, ko jūs darāt. Cita starpā: jūs nevarat garantēt, ka elementā patiešām ir kaut kas redzams, tikai tāpēc, ka tā redzamībai, displeja un necaurspīdīguma parametriem ir pareizās vērtības. Tam joprojām var trūkt satura vai arī var trūkt augstuma un platuma. To var aizsegt cits objekts. Lai iegūtu sīkāku informāciju, ātrā Google meklēšanā atrodams šis, un tajā pat ir iekļauta bibliotēka, ar kuras palīdzību var mēģināt atrisināt šo problēmu. (YMMV)
Pārbaudiet turpmāk norādītos, kas, iespējams, dublē šo jautājumu, ar lieliskām atbildēm, tostarp varenā Džona Resiga (John Resig) ieskatu. Tomēr jūsu konkrētais lietojuma gadījums nedaudz atšķiras no standarta gadījuma, tāpēc es atturēšos no atzīmēšanas:
(REDIĢĒT: OP RAKSTA, KA VIŅŠ LAPAS SKRĀPĒ, NEVIS VEIDO, TĀPĒC TĀLĀK MINĒTAIS NAV PIEMĒROJAMS) Labāks variants? Saistīt elementu redzamību ar modeļa īpašībām un vienmēr padarīt redzamību atkarīgu no šī modeļa, līdzīgi kā to dara Angular ar ng-show. To var izdarīt, izmantojot jebkuru rīku: Angular, vienkāršu JS vai jebkuru citu rīku. Vēl labāk - laika gaitā jūs varat mainīt DOM implementāciju, bet jūs vienmēr varēsiet nolasīt stāvokli no modeļa, nevis no DOM. Lasīt patiesību no DOM ir slikti. Un lēna. Daudz labāk ir pārbaudīt modeli un uzticēties savai implementācijai, lai nodrošinātu, ka DOM stāvoklis atspoguļo modeli. (Un izmantojiet automatizētu testēšanu, lai apstiprinātu šo pieņēmumu.)