The wysokość przesunięcia to właściwość HTML DOM używana w języku programowania JavaScript. Zwraca widoczną wysokość elementu w pikselach, która obejmuje wysokość widocznej zawartości, obramowania, dopełnienia i paska przewijania, jeśli występuje. Wartość offsetHeight jest często używana z właściwością offsetWidth. The szerokość przesunięcia to jeszcze jedna właściwość HTML DOM, która jest prawie taka sama jak offsetHeight. Te właściwości są używane przez JavaScript do znajdowania widocznej wysokości i szerokości elementów HTML.
OffsetHeight jest kombinacją następujących elementów HTML:
offsetHeight = height + border + padding + horizontal scrollbar
Z drugiej strony offsetWidth zawiera następujące elementy:
offsetWidth = width + border + padding + vertical scrollbar
Pamiętaj o jednej rzeczy: offsetHeight i offsetWidth nie uwzględniają marginesu, ani górnego, ani dolnego marginesu. Te właściwości DOM są używane przez Język programowania JavaScript do obliczenia wymiaru elementów HTML w pikselach.
python zapisz json do pliku
Za pomocą poniższego diagramu możesz znacznie lepiej zrozumieć offsetHeight i offsetWidth:
Obsługa przeglądarki
Właściwość offsetHeight DOM jest obsługiwana przez kilka przeglądarek internetowych, takich jak Chrome i Internet Explorer. Poniżej przedstawiono niektóre przeglądarki obsługujące właściwości offsetHeight i offsetWidth.
| Przeglądarka |  Chrom |  Internet Explorera |  Firefoksa |  Opera |  Safari |  Krawędź |
| obsługa przesunięcia wysokości | Tak | Tak | Tak | Tak | Tak | Tak |
Składnia
Poniżej znajduje się prosta składnia offsetHeight:
element.offsetHeight
Tutaj element jest zmienną utworzoną w JavaScript do przechowywania wartości właściwości CSS lub akapitu tekstu HTML.
Zwracane wartości
OffsetHeight i offsetWidth zwracają odpowiednio obliczoną wysokość i szerokość elementów HTML w pikselach.
Przykłady
Poniżej znajduje się lista kilku przykładów. Za pomocą którego zobaczymy jak wykorzystuje się i działa właściwość offsetHeight.
Przykład 1
HTML DOM offsetHeight Property example #JTP { height: 120px; width: 250px; margin: 20px; padding: 15px; background-color: yellow; } function getInfo() { var eleValue = document.getElementById('JTP'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h2> HTML DOM offsetHeight Property example </h2> <b> A basic information about this div tab: </b> Submit Wyjście
Zobacz poniższe dane wyjściowe zawierające akapit wyróżniony na żółto i przycisk przesyłania. Kliknij to Składać przycisk i oblicz offsetHeight tego akapitu.
Dane wyjściowe przed kliknięciem przycisku Prześlij
różnica między dwoma ciągami znaków w Pythonie
Dane wyjściowe po kliknięciu przycisku Prześlij
Obliczona wysokość przesunięcia zostanie wyświetlona wewnątrz tego podświetlonego na żółto obszaru.
Przykład 2
W tym przykładzie obliczymy offsetHeight dla akapitu podanego w tym przykładzie wraz ze stylami CSS. Pamiętaj, że offsetHeight nie będzie uwzględniał marginesu.
HTML DOM offsetHeight Property example #PStyle { height: 220px; width: 320px; margin: 20px; padding: 15px; background-color: pink; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 2 </h3> <p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Wyjście
Zobacz poniższe dane wyjściowe zawierające akapit wyróżniony na różowo i przycisk przesyłania. Kliknij to Oblicz wysokość przesunięcia przycisk i oblicz offsetHeight tego akapitu.
Dane wyjściowe przed kliknięciem przycisku Oblicz offsetHeight
Dane wyjściowe po kliknięciu przycisku Oblicz offsetHeight
Obliczona wysokość przesunięcia zostanie wyświetlona w tym podświetlonym na różowo obszarze. Na poniższym zrzucie ekranu widać, że offsetHeight dla danego akapitu wynosi 230px.
Przykład 3 bez stylizacji CSS
Zobacz inny przykład obliczania offsetHeight. Nie uwzględniliśmy żadnego stylu CSS, takiego jak wysokość, szerokość, margines, dopełnienie itp., oczekujemy koloru tła. Zatem akapit będzie prostym akapitem bez stylizacji.
HTML DOM offsetHeight Property example #PStyle { background-color: orange; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements in paragraph calculated as pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 3 </h3> <p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Wyjście
jak zmienić ciąg na int
Zobacz poniższe dane wyjściowe zawierające akapit w kolorze pomarańczowym i przycisk przesyłania, aby obliczyć wysokość przesunięcia. Kliknij to Oblicz wysokość przesunięcia przycisk i oblicz offsetHeight tego akapitu.
Przed kliknięciem przycisku Oblicz wysokość przesunięcia
Po kliknięciu przycisku Oblicz offsetHeight
Na poniższym zrzucie ekranu widać, że offsetHeight dla danego akapitu wynosi 88px.
Oblicz zarówno offsetHeight, jak i offsetWidth
W tym przykładzie obliczymy oba wysokość przesunięcia I szerokość przesunięcia dla akapitu wewnątrz karty div. Możesz więc zrozumieć, jak inaczej obliczyli. Tutaj użyjemy CSS i przekażemy wysokość, szerokość, margines, dopełnienie itp. do stylizacji w tym przykładzie.
Skopiuj i uruchom poniższy kod w swoim systemie, aby lepiej zrozumieć.
HTML DOM offsetHeight Property example #PStyle { height: 180px; width: 400px; margin: 20px; padding: 15px; background-color: lightblue; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt1 = 'OffsetHeight of the paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; var txt2 = 'OffsetWidth of the paragraph along with padding and border in pixels is: ' + eleValue.offsetWidth + 'px'; document.getElementById('sudo1').innerHTML = txt1; document.getElementById('sudo2').innerHTML = txt2; } <h2> Calculation of offsetHeight and offsetWidth </h2> <b> A basic information about this div tab: </b> Submit Wyjście
wystawianie Javy
Zobacz poniższe dane wyjściowe zawierające akapit w obszarze podświetlonym na jasnoniebieski kolor i przycisk przesyłania. Kliknij to Składać przycisk i oblicz offsetHeight i offsetWidth tego akapitu.
Dane wyjściowe przed kliknięciem przycisku Prześlij
Po kliknięciu na Składać przycisk, obliczone offsetHeight wynosi 210 pikseli, a offsetWidth wynosi 430 pikseli i jest wyświetlane wewnątrz tego jasnoniebieskiego podświetlonego obszaru. Zobacz wynik poniżej.
Dane wyjściowe po kliknięciu przycisku Prześlij
Widziałeś kilka przykładów mających różne parametry obliczeniowe. W tych różnych przykładach przekazaliśmy akapit tekstowy ze stylem CSS lub bez niego, a następnie osobno obliczyliśmy offsetHeight i offsetWidth.