Javascript Get Element Height

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

Webページを設計するときは、Webページに表示される要素に特定の寸法を指定することをお勧めします。たとえば、ボックスに特定の高さを設定したり、テキストの行を特定の幅に拡張したりすることができます。

ここで、CSSの高さと幅のプロパティが機能します。 heightプロパティとwidthプロパティは、CSSで要素の高さと幅を定義するために使用されます。

このチュートリアルでは、CSSの高さと幅のプロパティの基本と、最小および最大の高さの使用方法について例を挙げて説明します。レスポンシブ要素を設計するための幅と幅のプロパティ。このチュートリアルを終了するまでに、CSSの高さと幅のプロパティを使用してWebページ上の要素のサイズを設定することに慣れることができます。

CSSの高さと幅

調整Webページ上の要素の高さと幅により、要素がWebページ上で占めるスペースを定義できます。これは、各要素が必要に応じて正しく表示されるように、Webページの要素の構造を開発するのに役立ちます。

要素を水平方向および垂直方向にどれだけ伸ばすことができるかを定義するには、幅とそれぞれheightプロパティ。

widthプロパティとheightプロパティを使用すると、ボックスのコンテンツ領域に特定の幅と高さを設定できます。つまり、widthプロパティとheightプロパティは、ボックスに含まれるスペースの量を制御し、ボックスのマージンやパディングのセットには影響しません。

heightプロパティとwidthプロパティは、次の構文を使用します。

HeightValueとwidthValueは、次の値のいずれかを受け入れることができます。

  • 自動:ブラウザが自動的に高さと幅を計算します
  • 長さ:。フレームの幅または高さ(px、em、remなど)。
  • パーセンテージ:ボックスの幅または高さ(イニシャルが含まれるブロックのサイズのパーセンテージ)
  • 要素が表示されます:。
  • 継承:ボックスに指定されたデフォルト値。要素が表示されるボックスの幅または高さと同じ値

これで、高さと幅のプロパティの基本がわかったので、これらのそれぞれの例を調べることができます。動作中のプロパティ。

CSSの高さと幅

The Pickled Appleという地元のカフェのウェブサイトをデザインしているとします。このカフェから、「About」にボックスを作成するように依頼されました。ウェブサイトには、カフェの簡単な説明が含まれている必要があります。

この領域は、幅200ピクセル、高さ200ピクセルで、背景が明るい灰色である必要があります。これらのサイズは、追加する他の要素を確認するために選択されました。

次のコードを使用してボックスを作成できます。

クリックボタンの画像

コードを分析してみましょう..HTMLファイルで、<を使用してテキストの段落を作成しましたp>タグ。この

タグのクラス名はAboutBoxで、CSSファイルでテキスト段落のスタイルを設定します。

CSSファイルでは、次のようなスタイルルールを定義しています。クラス名がAboutBoxのすべての要素に適用されます。このスタイルルールは、要素の高さを200ピクセルに設定し、要素の幅を200ピクセルに設定し、要素の背景色を明るい灰色に設定します。

要素の幅を100ピクセルにする場合。 widthプロパティを100pxに変更する必要があります。または、要素の高さを300pxにする場合は、Heightプロパティを300pxに変更できます

CSSのプロパティ最小および最大の長さ

幅と高さは固定値です。これは、指定された幅と高さが同じままであり、ウィンドウのサイズを変更したり、別のデバイスでWebページを表示したりしても変更されないことを意味します(親要素のサイズのパーセンテージなどの高さの相対値を使用しない限り)。< / p>

アクセシブルなエクスペリエンスを設計する場合、要素に特定の高さと幅を設定することは実用的ではない可能性があるため、これを理解することが重要です。たとえば、画像の幅を500pxに指定した場合、ユーザーがモバイルデバイスでサイトを表示すると、画像が正しく表示されない可能性があり、画面のサイズが小さくなる可能性があります。

は、最小値と最大長の値。

要素を画面とウィンドウのサイズに合わせるには、最小幅、軸幅、最小高さ、最大高さのプロパティを使用できます。これらのプロパティを指定すると、幅と高さに指定された値が上書きされます。

min-heightプロパティは、プロパティの最小の高さを定義します。最小の高さが指定されている場合、要素の高さを最小の高さの値より低くすることはできません。 min-widthプロパティは、プロパティの最小幅を定義し、同じように機能します。

同様に、プロパティの最大の高さまたは幅を設定する場合は、最大の高さと最大の幅を使用できます。それぞれ。

前のコーヒーの例に戻りましょう。ユーザーの画面サイズに基づいてボックスの幅を変更するとします。ボックスの最大幅は500pxである必要があり、ボックスは100pxより狭くすることはできません。これは、次のコードを使用して行うことができます。

クリックボタンの画像

コードを分析してチャットしましょう。使い方。 HTMLファイルでは、最初の例と同じテキストを含む

タグの間にテキストの段落を指定しました。このテキスト段落に関連付けられているクラスの名前はAboutBoxです。

CSSファイルでは、 AboutBoxクラスに関連付けられている3つのプロパティを指定しています

p>

プロパティの幅max-は500pxに設定されています。これは、ボックスの最大幅が500pxであることを意味します。minwidthプロパティは100pxに設定されています。これは、ユーザーがサイトを表示しているデバイスに関係なく、ボックスが100pxより狭く表示されないことを意味します。 background-colorプロパティはLightGrayに設定されており、ボックスの背景色がライトグレーに設定されています。

この領域のサイズは、ブラウザのサイズに応じて変化します。したがって、ブラウザウィンドウを小さくすると、ボックスのサイズはそれに応じて変更されます。ただし、ブラウザウィンドウがいくら表示されても、

タグの幅が500pxを超えることはありません。

結論

CSSの高さと幅のプロパティiesを使用すると、Webページ上の要素の高さと幅を定義できます。

ただし、これらのプロパティは、要素の高さと幅に固定値を設定します。ブラウザウィンドウのサイズに基づいてボックスのサイズを変更する場合は、min height、min-width、max-height、max-widthの各プロパティを使用できます。

このチュートリアルでは、 、例、CSSでの高さと幅の基本、高さと幅のプロパティの使用方法、および最大の高さと幅と最小の一致プロパティを使用してWebページの要素のサイズを定義する方法を参照してください。これで準備が整いました。エキスパートのように高さと幅のプロパティの使用を開始します!