Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

バニラJavaScriptでdivの高さを取得する

clientHeightとoffsetHeightの2つのプロパティを使用して、divの高さを取得できます。

clientHeightには、divのパディングが含まれます。

offsetHeightには、パディング、スクロールバー、およびdivの境界線が含まれます。

例

たとえば、次のHTMLがある場合-

<div id="myDiv" height="400px"></div>

-

を使用して高さを取得できます 
const height = document.querySelector('#myDiv').offsetHeight
console.log(height)

出力

これにより、出力が得られます-

400

  1. JavaScriptでdivのスクリーンショットを撮る方法

    ウェブサイトをレイアウトするマークアップの一部をキャプチャ（画像に変換）し、キャプチャした画像を保存するか、何かを行う必要があります。したがって、この説明された動作を実現するための方法を考案する必要があります。 問題には、キャンバスだけでなくマークアップ要素のキャプチャも含まれるため、特に最初からキャプチャする場合は、少し複雑になります。したがって、簡単にするために、サードパーティのライブラリ htmltocanvasを使用します。 これは、名前が示すとおりに機能し、目的のマークアップをキャンバスに変換します。その後、キャンバス要素を画像としてダウンロードするだけです。 例 そのた

  2. JavaScriptでCSS変数を取得および設定する

    getComputedStyle（）メソッドは、ターゲット要素に適用されたすべてのスタイルを含むオブジェクトを提供します。 getPropertyValue（）メソッドは、計算されたスタイルから目的のプロパティを取得するために使用されます。 setProperty（）は、CSS変数の値を変更するために使用されます。 例 次の例は、JavaScriptを使用してCSS変数を取得および設定する方法を示しています。 <!DOCTYPE html> <html> <head> <style> :root {    --outerCo