JSでwidthを取得する方法の例-jsチュートリアル-php.cn

JSでwidthを取得する方法の例

零下一度

リリース： 2017-05-06 15:26:11

オリジナル

1955 人が閲覧しました

ウィンドウとドキュメントのこれらの属性の値には互換性がありません。これは後で追加されます。
効果の表示はIE9以前のブラウザを無視し、主に主流のブラウザと携帯電話の効果を考慮しています。クライアント領域のサイズを参照するには、width と height

Clientheight と ClientWidth の属性を取得でき、コンテンツ領域+padding が表示されます

   #t1{
       width: 100px;
       height: 100px;
       border: 4px solid yellowgreen;
       background: yellow;
       padding: 10px;
   }

ログイン後にコピー

p.clientWidth+ ';'+ p.clientHeight;
120=width(100)+padding(10)*2;
枠線は追加されませんコンテンツがはみ出した場合やスクロールバーが表示された場合、幅と高さはカウントされません。
は DOM オブジェクトの表示幅です。ここでの表示幅は、overflow:scroll; を設定した後にコンテンツの一部を非表示にすることを指します。

offsetHeight と offsetWidth は要素の外部サイズ、つまりボーダー + パディング + 表示されるコンテンツ領域です overflow: scroll;后部分内容隐藏而说的。
offsetHeight与offsetWidth 是元素的外在大小，即 border +padding+可见内容区

JSでwidthを取得する方法の例

128 = width(100)+padding(10)2+border(4)2
上图内容区溢出隐藏，是因为设置了overflow: scroll;才会有这样的现象。
scrolWidth与scrollHeight是元素的实际大小，即实际内容区+padding

JSでwidthを取得する方法の例

以上这三对属性都是针对dom元素的，可以测得元素的宽度，但是，细心的会发现，以上三种并没有提供获得width（100）的方法，所以可以使用window.getComputedStyle(p,null).getPropertyValue('width');
这样获得就是100。

其实比较难理解的是像window、document.body、document. documentElement这两个dom对象在获得他们的宽度时会有各种问题。
现在开始撕一下这其中的神奇。。。

document.body与document. documentElement
前者是body，后者是html。但是现在大家都习惯将元素默认的padding与margin设置为0，这样无论是通过以上两种谁去访问clientWidth都是一样的值（电脑端一致）。
但是手机端访问这两个值的时候会随着由于是客户端，我们会对网页的meta

JSでwidthを取得する方法の例
128 = width(100)+padding( 10)2+border(4)2
上の図のコンテンツ領域がオーバーフローして非表示になるこの現象は、overflow:scroll; が設定されているために発生します。

JSでwidthを取得する方法の例

上記の 3 つの属性のペアは次のとおりです。すべて dom 要素の場合、要素の幅を測定できますが、注意すると、上記の 3 つは幅 (100) を取得するメソッドを提供していないことがわかります。そのため、 window.getComputedStyle( p,null).getPropertyValue('width');
結果は 100 です。

実際、理解するのがさらに難しいのは、window、document.body、document.documentElement などの 2 つの DOM オブジェクトが幅を取得するときにさまざまな問題を抱えていることです。それでは、この魔法を見てみましょう。。。 document.bodyとdocument.documentElement前者はbody、後者はhtmlです。しかし今では、要素のデフォルトのパディングとマージンを 0 に設定することに誰もが慣れているため、上記の 2 つのメソッドを通じて誰が clientWidth にアクセスしても、その値は同じ (コンピューター側でも同じ) になります。ただし、携帯電話がこれら 2 つの値にアクセスする場合、それはクライアントであるため、Web ページの meta タグにいくつかの設定を行ってから、これらを通じてアクセスされる属性の値を設定します。 2 つのオブジェクトは同じではありません。ただし、body は html のサブタグであるため、ビジュアルウィンドウのサイズ (clientWidth) を取得するには、後者の document.documentElement.clientWidth を使用することをお勧めします。ドキュメントオブジェクトには compatMode 属性があり、これには 2 つの値があります: CSS1Compat は strict モードに対応します要約すると、document.body の使用を放棄し、document.documentElement を使用してください。次に話すのは、Web ページにメタタグを追加しない場合の影響についてです。adaptive


BackCompat は quirks モードに対応します	IE6 より前のブラウザは最初のレンダリングモードであり、これにより IE6 はビジュアルウィンドウ (clientWidth) を取得しました。アクセスするには、document.body.clientWidth を使用する必要があります。 IE6 インターン先の会社が辞めてしまいました。
		window.innerWidth と document.documentElement.clientWidth のどちらを使用すればよいですか?

の知識が関係するため、タグの追加については別の記事を書こうと思います。 Android ブラウザ、iPhone の Safari ブラウザ、WeChat で実行されている QQ ブラウザを使用して、これら 2 つの携帯電話で Web ページにアクセスするテストを行いました。テスト結果は確かに均一ではありません。テスト前提: ページに固定幅を設定せず、メタタグも設定しないでください。プロパティAndroidiphonewindow.innerWidth980px980px~.~.clientWidth980px