の オフセット高さ は HTML DOM プロパティであり、JavaScript プログラミング言語で使用されます。要素の表示高さをピクセル単位で返します。これには、表示コンテンツ、境界線、パディング、スクロールバーが存在する場合はその高さも含まれます。 offsetHeight は、offsetWidth プロパティとともによく使用されます。の オフセット幅 これは HTML DOM のもう 1 つのプロパティであり、offsetHeight とほぼ同じです。これらのプロパティは、HTML 要素の表示される高さと幅を見つけるために JavaScript によって使用されます。
offsetHeight は、次の HTML 要素の組み合わせです。
offsetHeight = height + border + padding + horizontal scrollbar
一方、offsetWidth には次の要素が含まれます。
offsetWidth = width + border + padding + vertical scrollbar
offsetHeight と offsetWidth にはマージン、上マージンも下マージンも含まれないということを 1 つ覚えておいてください。これらの DOM プロパティは次によって使用されます。 JavaScript プログラミング言語 HTML 要素のサイズをピクセル単位で計算します。
アルファベット番号は何ですか
以下の図を参照すると、offsetHeight と offsetWidth をよりよく理解できます。
ブラウザのサポート
offsetHeight DOM プロパティは、Chrome や Internet Explorer などのいくつかの Web ブラウザでサポートされています。以下に、offsetHeight プロパティと offsetWidth プロパティをサポートするいくつかのブラウザを示します。
| ブラウザ |  クロム |  インターネットエクスプローラ |  ファイアーフォックス |  オペラ |  サファリ |  角 |
| offsetHeight のサポート | はい | はい | はい | はい | はい | はい |
構文
以下は offsetHeight の簡単な構文です。
element.offsetHeight
ここで、 element は、CSS プロパティ値または HTML テキスト段落を保持するために JavaScript で作成された変数です。
戻り値
offsetHeight と offsetWidth は、HTML 要素の計算された高さと幅をそれぞれピクセル単位で返します。
例
以下にいくつかの例を示します。これを利用して、offsetHeight プロパティがどのように使用され、機能するかを見ていきます。
mysqlはすべてのユーザーを表示します
例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 出力
黄色で強調表示された段落と送信ボタンを含む以下の出力を参照してください。これをクリックしてください 提出する ボタンをクリックして、この段落の offsetHeight を計算します。
送信ボタンをクリックする前に出力する
送信ボタンをクリックすると出力されます
計算された offsetHeight は、この黄色で強調表示された領域内に表示されます。
例 2
この例では、CSS スタイルとともに、この例で指定された段落の offsetHeight を計算します。 offsetHeight にはマージンが含まれないことに注意してください。
ネットワークとインターネット
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 出力
ピンクで強調表示された段落と送信ボタンを含む以下の出力を参照してください。これをクリックしてください オフセット高さを計算する ボタンをクリックして、この段落の offsetHeight を計算します。
「オフセット高さの計算」ボタンをクリックする前の出力
「オフセット高さを計算」ボタンをクリックした後の出力
計算された offsetHeight が、このピンク色で強調表示された領域内に表示されます。以下のスクリーンショットでは、指定された段落の offsetHeight が 230px であることがわかります。
例 3 CSS スタイルを使用しない場合
offsetHeight を計算する別の例を参照してください。背景色を想定して、高さ、幅、マージン、パディングなどの CSS スタイルは含めていません。したがって、段落はスタイルのない単純な段落になります。
アップキャスト
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 出力
オレンジ色で強調表示された段落と、offsetHeight を計算するための送信ボタンを含む以下の出力を参照してください。これをクリックしてください オフセット高さを計算する ボタンをクリックして、この段落の offsetHeight を計算します。
「オフセット高さを計算」ボタンをクリックする前に
「オフセット高さを計算」ボタンをクリックした後
以下のスクリーンショットでは、指定された段落の offsetHeight が 88 ピクセルであることがわかります。
offsetHeight と offsetWidth の両方を計算します
この例では、両方を計算します。 オフセット高さ そして オフセット幅 div タブ内の段落の場合。したがって、計算方法がどれほど異なっているかがわかります。ここでは、CSS を使用して、この例のスタイル設定のために高さ、幅、マージン、パディングなどを渡します。
理解を深めるために、システム上で以下のコードをコピーして実行します。
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 出力
水色の強調表示された色の領域と送信ボタンを含む段落を含む以下の出力を参照してください。これをクリックしてください 提出する ボタンをクリックして、この段落の offsetHeight と offsetWidth を計算します。
送信ボタンをクリックする前に出力する
np.log
をクリックした後、 提出する ボタンをクリックすると、計算された offsetHeight は 210 ピクセル、offsetWidth は 430 ピクセルとなり、この水色で強調表示された領域内に表示されます。以下の出力を参照してください。
送信ボタンをクリックすると出力されます
さまざまな計算パラメータを持ついくつかの例を見てきました。これらのさまざまな例では、CSS スタイルありまたは CSS スタイルなしでテキスト段落を渡し、offsetHeight と offsetWidth を個別に計算しました。