要素のサイズを取得するJavaScriptの詳細説明

#[関連する学習の推奨事項: JavaScript 学習チュートリアル ]

HTMLサイズ

要素のいわゆるHTMLサイズは、

HTMLタグで設定されたサイズスタイルを指します。

例:

<p></p>复制代码

ページ効果は次のとおりです:

このサイズは渡すことができます

elem.style.width または elem.style.height は

を取得します。 例:

let box = document.querySelector('.box');console.log(box.style.width); // 200pxconsole.log(box.style.heihgt); // 200px复制代码

ただし、

CSS の寸法の場合、それらは入手不可能です。

例:

.box {    width: 200px;    height: 200px;    background: lightpink;
}复制代码

以下に示すように:

スタイルと構造を分離するには、スタイルを

CSS ファイルに別途記述します。上記の方法で要素のサイズを取得できない場合、どのような方法を使用して取得すればよいでしょうか?

それから下を見てください。

JavaScript の element オブジェクトには、要素のサイズを取得するために使用できる 3 つの 読み取り専用プロパティが提供されています。 。

それらは次のとおりです:

##offsetHeight
• および offsetWidth
clientHeight
• および clientWidth #scrollHeight
and
• scrollWidth最初のものから始めましょう

# #offsetHeight

と

offsetWidthoffsetHeight

は、垂直パディングを含む要素 (

border-box) の実際の高さを取得するために使用されます。水平スクロール バーがある場合 (水平スクロール バーの高さは 17px で、通常はコンテンツの高さ height に含まれます)、水平スクロール バーも追加する必要があります。スクロール バーの高さ。 offsetWidth

は、要素 (

border-box) の実際の幅を取得するために使用されます。これには、要素の水平方向のパディングと境界線が含まれます (存在する場合)。垂直スクロール バー (水平スクロール バーの高さは 17px で、通常はコンテンツの幅 width に含まれます)。垂直スクロール バーの幅も追加する必要があります。 。 #スクロール バーがない場合 ##p

要素には次のスタイルがあります

#

.box {    margin: 10px auto;    padding: 10px;    width: 200px;    height: 200px;    border: 1px solid #000;    background: lightpink;
}复制代码

ページの効果は次のとおりです:

##ボックス モデルは次のとおりです:

## なぜなら

offsetHeight

要素の実際の高さを取得します。 #1px * 2

、

222px

offsetWidth の場合、要素の実際の幅を取得します。幅は width padding * 2 border * 2、つまり 200px 10px * 2 1px * 2、222px

let box = document.querySelector('.box');let height = box.offsetHeight;let width = box.offsetWidth;console.log(height); // 222pxconsoel.log(width); // 222px复制代码

スクロールバーが含まれる場合スクロールバーが含まれる場合、水平スクロールバーの高さは17px は、通常、コンテンツの高さ height に含まれます。つまり、コンテンツの高さの実際の値は、設定値よりも 17px 小さくなります。 2 つの p は親子関係であり、次のスタイルを持ちます:

.father {    margin: 10px auto;    padding: 10px;    width: 200px;    height: 200px;    border: 1px solid;    background: lightsalmon;    /* 滚动条高度和宽度被计算到content中 */
    overflow: auto;
}.son {    width: 220px;    height: 220px;    background: plum;
}复制代码

ページの効果は次のとおりです:

ボックス モデルは次のとおりです。

ご覧のとおり、実際の実効値は次のとおりです。コンテンツ領域の幅は 183px

です。

は、設定された

width

値から垂直スクロール バーの幅 17px

を引いたものです。コンテンツ領域の高さについても同様です。

ただし、スクロール バーがある場合、

offsetHeight

と

offsetWidth の値には、パディングに加えてスクロール バーの高さと幅も含める必要があります。そして境界値。スクロール バーはコンテンツ領域の

width

および

height

スペースの一部を占めますが、最終計算で追加されます。 <p>所以真实宽度还是相当于原来设置的<code>width+ padding * 2+ border * 2，即200px + 10px * 2+1px * 2，为222px。高度亦然。

let f_box = document.querySelector('.father');let f_height = f_box.offsetHeight;let f_width = f_box.offsetWidth;console.log(f_height); // 220pxconsole.log(f_width); // 220px复制代码

clientHeight和clientWidth

clientHeight和clientWidth表示可视区域的高度和宽度，包括元素内容本身的宽度和高度以及padding。但是，如果有滚动条的话，需要减去滚动条的宽度和高度。

没有滚动条时

一个p有如下样式：

.box {    margin: 10px auto;    padding: 10px;    width: 200px;    height: 200px;    border: 1px solid #000;    background: lightpink;
}复制代码

页面效果如下：

其盒模型如下：

该元素的clientHeight为width+padding * 2，即200px+10px * 2，为220px，高度亦然。

let box = document.querySelector('.box');let height = box.clientHeight;let width = box.clientWidth;console.log(height); // 220pxconsoel.log(width); // 220px复制代码

含有滚动条时

当含有滚动条时，需要减去滚动条的宽度和高度。

父子p有如下样式：

.father {    margin: 10px auto;    padding: 10px;    width: 200px;    height: 200px;    border: 1px solid;    background: lightsalmon;    /* 滚动条高度和宽度被计算到content中 */
    overflow: auto;
}.son {    width: 220px;    height: 220px;    background: plum;
}复制代码

页面效果如下：

其盒模型如下：

那么，clientWidth的值为width+padding * 2-17px，即200px+10px * 2-17px，为203px

所谓可视区域，就是我们最终能看到的部分。就像下图一样，原来的元素如果没有滚动条，它的尺寸应该是红色框线所包裹的尺寸。

但是，由于多了滚动条，可视区域就减小了，如下所示。在原有尺寸基础上减去滚动条的宽度和高度就是可视区域的宽度和高度了。

scrollHeight与scrollWidth

scrollHeight用于获取一个元素的内容高度，包括溢出的部分。scrollWidth用于获取一个元素的内容宽度，包括溢出的部分。当然，在没有溢出，即没有滚动条的情况下，这两个值等同于clientHeight和clientWidth，也是包括元素本身的尺寸以及padding，但不包括border和margin

父子p有如下样式：

.father {    margin: 10px auto;    padding: 10px;    /* 父元素的内容宽度：320px + 10px = 330px */
    width: 200px;    /* 父元素的内容高度：200px - 17px = 203px */
    height: 200px;    border: 1px solid #000;    overflow: auto;
}.son {    padding: 10px;    /* 子元素的真实宽度：300px + 10px * 2 = 320px */
    width: 300px;    height: 100px;    background: plum;
}复制代码

页面效果如下：

由于子元素的高度只有100px，没有发生溢出，因此，父元素的scrollHeight就等同于clientHeight：width+padding-水平滚动条高度17px，即200px+10px*2-17px=203px

子元素真实占据的宽度有300px+10px*2 = 320px，外加父元素设置的左侧内边距还是10px，右侧内边距失效。因此父元素的scrollWidth的值为320px+10px，为330px

let f_box = document.querySelector('.father');let height = f_box.scrollHeight;let width = f_box.scrollWidth;console.log(height); // 203pxconsole.log(width); // 330px复制代码

父元素设置overflow造成右内边距失效的问题

关于父元素设置overflow: auto时，造成的右内边距失效，有以下图片可以佐证。

上に示すように、親要素には左側と上側に 10px のパディングがありますが、右側にはありません。

上に示すように、子要素が overflow に設定されていないため、右内側のマージンが子要素は引き続き有効です。

子要素の幅が親要素の幅より大きい場合、子要素の margin-right または子要素の padding-right親要素は 0 として計算されます。ここでは詳しく説明しません。

プログラミング学習について詳しく知りたい方は、php training のコラムに注目してください！

以上が要素のサイズを取得するJavaScriptの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。