ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript の offsetWidth に関するバグの問題と解決策

JavaScript の offsetWidth に関するバグの問題と解決策

黄舟
黄舟オリジナル
2017-05-21 13:18:501409ブラウズ

この記事では、主に JavaScript の offsetWidth のバグと解決策を詳しく紹介します。興味のある方は、object

の Visible width の

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 は境界線を考慮するため、

タイマー が最初にポーリングすると、width: 102 - 1 == 101、その後、offsetWidth はすぐに 103 になり、2 回目は width: 103 - 1 == 102 になります。 offsetWidth はすぐに 104 になります; 3 回目の直後、width: 104 - 1 == 103、offsetWidth は 104...

If op.style.width = op.offsetWidth - 1 + 'px' は - に置き換えられます。 2 の場合、offsetWidth は 102 なので、赤い p は移動せず、広くも狭くもなりません。 2 を引くことは、100 が元の幅に等しいことを意味し、次回

がループするとき、offsetWidth は 100 プラスになります。境界線の 2 を引いて 2 または 100 に移動するので、移動しないでください...* 解決策も非常に簡単です。気分を害する余裕がない場合は、隠す余裕はありません。 offsetWidth は必要ありません。


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


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

    IE では、 element.
  • current

    Style.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>

以上がJavaScript の offsetWidth に関するバグの問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。