JSにおけるoffsetWidthのバグと扱い方-jsチュートリアル-php.cn

JSにおけるoffsetWidthのバグと扱い方

Y2J

リリース： 2018-05-14 16:40:22

オリジナル

2821 人が閲覧しました

この記事では主に JavaScript の offsetWidth のバグと解決策を詳しく紹介します。興味のある方は参照してください。

offsetWidth はオブジェクトの表示幅を表します。
例:

#p1 {
 width: 100px;
 height: 200px;
 background: red;
}

ログイン後にコピー

結果: 100

#p1 {
 width: 100px;
 height: 200px;
 background: red;
 border: 2px solid black;
}

ログイン後にコピー

結果: 104 (100 + 2 + 2)

#p1 {
 width: 100px;
 height: 200px;
 background: red;
 border: 2px solid black;
 padding: 20px;
}

ログイン後にコピー

結果: 144 (100 + 2 + 2 + 20 + 20)

#p1 {
 width: 100px;
 height: 200px;
 background: red;
 margin: 4px;
}

ログイン後にコピー

結果: 100

つまり、offsetWidth = width + padding + border、marginとは何の関係もありません。

**
例を見てみましょう:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
  }
 </style>
</head>
<body>
 <p id="p1"></p>
 <script type="text/javascript">
  var op = document.getElementById(&#39;p1&#39;);
  setInterval(function() {
   op.style.width = op.offsetWidth - 1 + &#39;px&#39;;
  }, 50);
 </script>
</body>
</html>

ログイン後にコピー

現象: 赤い p が徐々に狭くなり、消えるまで問題ありません。

p に境界線を追加したらどうなるでしょうか?

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 </style>
</head>
<body>
 <p id="p1"></p>
 <script type="text/javascript">
  var op = document.getElementById(&#39;p1&#39;);
  setInterval(function() {
   op.style.width = op.offsetWidth - 1 + &#39;px&#39;;
  }, 50);
 </script>
</body>
</html>

ログイン後にコピー

現象: 赤い p が狭くならないだけでなく、どんどん広くなっていきます...

理由も非常に単純です。これは境界線の直接の原因です。offsetWidth がかかるためです。境界線を考慮して、Timer 初めてポーリングするときは、幅: 102 - 1 == 101、その後 offsetWidth はすぐに 103 になります。2 回目のポーリングでは、幅: 103 - 1 == 102、その後、offsetWidth はすぐに 104 になります。 ; 直後に 3 回、width: 104 - 1 == 103、offsetWidth は 104...

if op.style.width = op.offsetWidth - 1 + 'px'; red p は移動しません。offsetWidth が 102 であるため、幅が広くなったり狭くなったりすることはありません。2 を減算すると、次回 loop では、offsetWidth は 100 に 2 を加えたものになります。もう一度 2 を引いても 100 になるので、移動しないでください...*

解決策も非常に簡単です。怒らせたり隠したりする余裕はありません。 offsetWidth は必要ありません。

要素の行間スタイルを取得するには、element.style.width を直接使用できることは誰もが知っていますが、これは要素の行間スタイルにのみ適用され、CSS で記述されている場合はそれができません。

しかし、次の方法もあります:

IE では、 element.currentStyle.width / element.currentStyle.['width'];
非 IE では、 getComputedStyle(element, false)['width'] を使用します

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 </style>
</head>
<body>
 <p id="p1"></p>
 <script type="text/javascript">

  var op = document.getElementById(&#39;p1&#39;);
  function getStyle(obj, attr) {
   if (obj.currentStyle) {//IE
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
  alert(getStyle(op, &#39;width&#39;));//直接弹出 “500px”
 </script>
</body>
</html>

ログイン後にコピー

上記のパッケージを使用すると、offsetWidth によって引き起こされる問題を解決できます

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>offsetWidth</title>
 <style type="text/css">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
 </style>
</head>
<body>
 <p id="p1"></p>
 <script type="text/javascript">
  var op = document.getElementById(&#39;p1&#39;);
  function getStyle(obj, attr) {
   if (obj.currentStyle) {//IE
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
  setInterval(function() {
   //parseInt是因为getStyle()返回的是‘px&#39;带单位，要整数化
   op.style.width = parseInt(getStyle(op, &#39;width&#39;)) - 1 + &#39;px&#39;;
  }, 30);
 </script>
</body>
</html>

ログイン後にコピー

[関連する推奨事項]

1 JavaScript の無料ビデオチュートリアル

2. JavaScript フォーム検証の実装コード_ JavaScript スキル

3. モバイルでお金の形式検証を実装するための 1 行の JS

4. vue v-model フォームコントロールバインディングのサンプルチュートリアル

5. Bootstrap フォーム検証 formValidation の

以上がJSにおけるoffsetWidthのバグと扱い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。