Ten blog demonstruje użycie elementu DOM wysokość klienta w HTMLu.
Jak używać elementu DOM „clientHeight” w HTML?
„ wysokość klienta ” pozwala programistom obliczyć wysokość widocznej zawartości elementu. Pomaga w pozycjonowaniu elementów względem siebie lub określeniu, czy użytkownik przewinął do prawej krawędzi przewijalnego kontenera. Dostarcza również informacji o pozostałym niewykorzystanym miejscu na stronie.
Przykład
Przeanalizujmy przykład, aby lepiej zademonstrować właściwość „clientHeight”. Na przykład „ na kliknięcie ” detektor zdarzeń jest używany do wyświetlania wyniku dostarczonego przez „ wysokość klienta ' nieruchomość:
< ciało >
< h2 ID = 'element' >< / h2 >
< h2 ID = 'element' na kliknięcie = 'pokaż elementWysokość()' >
Kliknij artykuł Linuxhint, aby wyświetlić wzrost!
< / h2 >
< scenariusz >
funkcja showelementWysokość() {
var przykład = document.getElementById('element');
var elementWysokość= przykład.Wysokość klienta;
alert('Wysokość to: ' + elementHeight + ' piksele.');
}
< / scenariusz > >
< / ciało >
Wyjaśnienie powyższego fragmentu kodu opisano poniżej:
- Najpierw utwórz „ ” tag wewnątrz „
” i podaj mu fikcyjne dane. Przypisz także identyfikator „ element ” do wybranego elementu HTML. - Następnie dodaj „ na kliknięcie() ” detektor zdarzeń, który wywołuje „ pokażelementWysokość() ”, gdy użytkownik kliknie na „ ' element.
- Następnie wewnątrz „ pokażelementWysokość() ” tworzy zmienną o nazwie „ przykład ”, który działa jako instancja elementu HTML o identyfikatorze „ element ”.
- Następnie utwórz kolejną zmienną o nazwie „ Wysokość elementu ’’, który przechowuje wynik dostarczony przez właściwość „clientHeight”.
- Następnie wyświetl „ Wysokość elementu ’’ w polu alertu za pomocą „ alarm() ' metoda.
Na koniec dodaj następujące właściwości CSS do stylizacji „ h2 ' element:
< styl >
#element {
margines: 20px;
wypełnienie: 10px;
tło- kolor : ciemnobłękitny;
wysokość : 300 pikseli;
tekst- wyrównywać : Centrum;
linia- wysokość : 100 pikseli;
}
< / styl >
W powyższym fragmencie kodu następujące właściwości CSS są przypisane do elementu div o identyfikatorze „ element ”:
- „ 20px ”, „ 10 piks ' I ' ciemnocyjan ” wartości są dostarczane do CSS „ margines ”, „ wyściółka ' I ' kolor tła ”, odpowiednio.
- wykorzystuje również „ wysokość ”, „ wyrównanie tekstu ' I ' Wysokość linii ” Właściwości CSS w celu zwiększenia widoczności dla użytkownika.
Po wykonaniu powyższego fragmentu kodu strona wygląda następująco:
Dane wyjściowe pokazują, że wysokość wybranego elementu jest wyświetlana w polu alertu za każdym razem, gdy użytkownik kliknie element.
Wniosek
Aby skorzystać z „ wysokość klienta ” w HTML, wybierz element HTML, uzyskując dostęp do atrybutu id. Następnie dołącz właściwość „clientHeight” i wyświetl wynik. Jest to właściwość tylko do odczytu i zwraca wynik w pikselach. Właściwość „clientHeight” działa wewnątrz znacznika „