JavaScript Pobierz wysokość elementu

| | | | | | | | | | | | | | | | | | | |

Podczas projektowania strony internetowej prawdopodobnie będziesz chciał określić określone wymiary elementów, które pojawiają się na stronie internetowej. Na przykład możesz chcieć, aby pole miało określoną wysokość lub wiersz tekstu rozciągał się na określoną szerokość.

to miejsce, w którym w grę wchodzą właściwości CSS height i width. Właściwości height i width służą do definiowania wysokości i szerokości elementu w CSS.

Ten samouczek omówi z przykładami podstawy CSS height i width oraz jak używać minimalnej i maksymalnej wysokości i właściwości szerokości do projektowania responsywnych elementów. Pod koniec tego samouczka będziesz dobrze zorientowany w używaniu właściwości CSS height i width, aby ustawić rozmiar elementu na stronie internetowej.

Wysokość i szerokość CSS

Dostosowywanie wysokość i szerokość elementu na stronie internetowej pozwala na zdefiniowanie miejsca, które element zajmie na stronie internetowej. Może to pomóc w opracowaniu struktury elementów Twojej strony internetowej, tak aby każdy element wyświetlał się poprawnie zgodnie z Twoimi potrzebami.

Aby określić, jak daleko element może rozciągać się w poziomie i w pionie, możesz użyć szerokości i odpowiednio właściwości height.

Właściwości width i height umożliwiają ustawienie określonej szerokości i wysokości dla obszaru zawartości pudełka. Oznacza to, że właściwości width i height kontrolują ilość miejsca zajmowanego przez pole i nie wpływają na margines lub zestaw dopełnienia pola

Właściwości height i width używają następującej składni:.

HeightValue i widthValue mogą przyjmować dowolne z następujących wartości:

  • auto: przeglądarka automatycznie oblicza wysokość i szerokość
  • długość:. szerokość lub wysokość ramki w pikselach, em, rem itp.
  • procent: szerokość lub wysokość ramki jako procent rozmiaru bloków, w których występuje inicjał
  • pojawia się element:. domyślna wartość określona w polu
  • dziedzicz:. taką samą wartość jak szerokość lub wysokość pola, w którym pojawia się element

Teraz, gdy znamy podstawy właściwości wysokości i szerokości, możemy zbadać przykład każdego z nich właściwości w działaniu.

Wysokość i szerokość CSS

Załóżmy, że projektujemy witrynę internetową dla lokalnej kawiarni o nazwie The Pickled Apple. Ta kawiarnia poprosiła nas o utworzenie pola na ich „O mnie” stronę internetową, która powinna zawierać krótki opis kawiarni.

Ten obszar powinien mieć szerokość 200px i wysokość 200px oraz mieć jasnoszare tło. Te wymiary zostały wybrane, aby upewnić się, że inne elementy, które chcemy dodać do kształtu strony internetowej, gdy je zaimplementujemy.

Możemy użyć następującego kodu, aby utworzyć pole:.

Kliknij Obraz przycisku

Przeanalizujmy nasz kod.. W naszym pliku HTML utworzyliśmy akapit tekstu za pomocą

znacznik. Ten

znacznik ma nazwę klasy AboutBox, której używamy w naszym pliku CSS do stylizacji akapitu tekstu.

W naszym pliku CSS zdefiniowaliśmy regułę stylu, która dotyczy dowolnego elementu o nazwie klasy AboutBox. Ta reguła stylu ustawia wysokość elementu na 200 pikseli, szerokość elementu na 200 pikseli i ustawia kolor tła elementu na jasnoszary.

Jeśli chcemy, aby nasz element miał szerokość 100 pikseli. Potrzebujemy zmienić właściwość width równą 100px. Lub, jeśli chcielibyśmy, aby nasz element miał wysokość 300px, możemy zmienić właściwość Height na 300px

właściwości CSS minimalna i maksymalna długość

szerokość i wysokość są wartościami stałymi. oznacza to, że określona szerokość i wysokość pozostają takie same i nie zmienią się, jeśli zmienisz rozmiar okna lub wyświetlisz stronę internetową na innym urządzeniu (chyba że użyjesz wartości względnej wysokości, na przykład procent rozmiaru elementu nadrzędnego).

Ważne jest, aby to zrozumieć, ponieważ jeśli chcesz zaprojektować środowisko z ułatwieniami dostępu, ustawienie określonych wysokości i szerokości elementów może być niepraktyczne. Na przykład, jeśli określisz szerokość obrazu na 500 pikseli, obraz może nie renderować się poprawnie, jeśli użytkownik przegląda witrynę na urządzeniu mobilnym, rozmiar ekranu może być mniejszy.

jest tam, gdzie minimalna i maksymalne wartości długości .

Aby dostosować element do ekranów i wymiarów okien , możesz użyć właściwości minimalna szerokość, maksymalna szerokość, minimalna wysokość i maksymalna wysokość. Gdy określisz te właściwości, wartości określone dla szerokości i wysokości zostaną nadpisane.

Właściwość min-height określa minimalną wysokość właściwości. Jeśli określono wysokość minimalną, wysokość elementu nigdy nie może być mniejsza niż wartość wysokości minimalnej. Właściwość min-width definiuje minimalną szerokość właściwości i działa w ten sam sposób.

Podobnie, jeśli chcesz ustawić maksymalną wysokość lub szerokość właściwości, możesz użyć maksymalnej wysokości i maksymalnej szerokości, odpowiednio.

Wróćmy do naszego wcześniejszego przykładu kawy. Załóżmy, że chcemy zmienić szerokość naszego pudełka na podstawie rozmiaru ekranu użytkownika . Maksymalna szerokość pudełka powinna wynosić 500px, a nasze pudełko nigdy nie powinno być węższe niż 100px. Możemy to zrobić za pomocą następującego kodu:

Kliknij Obraz przycisku

Przeanalizujmy nasz kod i porozmawiajmy. Jak to działa. W naszym pliku HTML określiliśmy akapit tekstu między znacznikami

zawierającymi ten sam tekst, co nasz pierwszy przykład. Nazwa klasy powiązanej z tym akapitem tekstowym to AboutBox.

W naszym pliku CSS określiliśmy trzy właściwości powiązane z klasą AboutBox

Szerokość właściwości max- jest ustawione na 500px, co oznacza, że maksymalna szerokość pola to 500px Właściwość min width jest ustawiona na 100px, co oznacza, że pole nigdy nie będzie węższe niż 100px, bez względu na to, na jakim urządzeniu użytkownik przegląda witrynę. Właściwość background-color jest ustawiona na LightGray, która ustawia kolor tła naszego pola na jasnoszary.

Rozmiar tego obszaru zmienia się w zależności od rozmiaru przeglądarki. Jeśli więc zmniejszysz okno przeglądarki , rozmiar pola odpowiednio się zmieni. Jednak bez względu na to, jak duże jest okno przeglądarki, szerokość tagu

nigdy nie przekroczy 500 pikseli.

Wniosek

Właściwość wysokości i szerokości CSS Pozwalają one na zdefiniowanie wysokości i szerokości elementu na stronie internetowej.

Jednak właściwości te ustawiają stałą wartość wysokości i szerokości elementu. Jeśli chcesz, aby rozmiar pola zmieniał się w zależności od rozmiaru okna przeglądarki, możesz użyć właściwości min height, min-width, max-height i max-width.

W tym samouczku omówiono , odwołując się do przykładów, podstaw wysokości i szerokości w CSS, jak używać właściwości height i width oraz jak używać maksymalnej wysokości i szerokości oraz minimalnych właściwości dopasowania do określenia rozmiaru elementu strony internetowej.Jesteś gotowy aby zacząć używać właściwości wysokości i szerokości jak ekspert!