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

---

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

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

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

e

• 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; が設定されているために発生します。

scrollWidthとscrollHeightは要素の実際のサイズ、つまり実際のコンテンツ領域+パディングです

• 
  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

テスト結果:

🎜980px🎜 🎜 🎜🎜🎜🎜🎜🎜プロパティ🎜🎜Android WeChat🎜🎜iPhone WeChat🎜🎜🎜🎜🎜🎜window.innerWidth🎜🎜🎜320px🎜🎜🎜980px 🎜🎜 🎜🎜~.~.clientWidth🎜🎜980px🎜🎜980px🎜 🎜🎜 🎜

トラブルメーカーは常に存在します。 。 。
要約: モバイル ページの視覚的な幅を取得したい場合は、
document を使用することをお勧めします。 documentElement.clientWidth

次の記事では、さまざまな設定でのこの属性の値について説明します。メタタグが解析されます。

ところで: 私はまた戻ってきて、一生懸命勉強しています!

【関連おすすめ】

1. 無料のjsオンラインビデオチュートリアル

3. php.cn Dugu Jiijian (3) - JavaScriptビデオチュートリアル

以上がJSでwidthを取得する方法の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。