집 > 기사 > 웹 프론트엔드 > JavaScript의 offsetWidth에 대한 버그 문제 및 해결 방법

JavaScript의 offsetWidth에 대한 버그 문제 및 해결 방법

黄舟원래의: 2017-05-21 13:18:501401검색

이 글은 JavaScript의 offset 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 = 너비 + 패딩 + 테두리, 여백과 관련이 없습니다 .

**
예를 살펴보겠습니다:

<!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이 됩니다. 두 번째에는 width: 103 - 1 == 102가 되고, offsetWidth는 즉시 104가 되며, 세 번째에는 width: 104 - 1 == 103, offsetWidth가 104가 됩니다.

op.style.width = op.offsetWidth - 1 + 'px';를 -2로 변경하면 빨간색 p는 이동하지도 않고 더 넓어지거나 좁아지지도 않습니다. 왜냐하면 offsetWidth는 다음과 같습니다. 102. 2를 빼면 100이 원래 너비와 같음을 의미합니다. 다음 번 루프에서 offsetWidth는 100에 테두리의 2를 더한 값과 같으므로 여전히 100이 됩니다. 움직이지 마세요...*

해결 방법도 매우 간단합니다. 기분을 상하게 할 여유가 없다면 숨을 여유도 없겠죠? offsetWidth가 필요하지 않습니다!

요소의 행간 스타일을 얻으려면 element.style.width를 직접 사용할 수 있다는 것을 모두 알고 있지만 이는 CSS로 작성된 요소의 행간 스타일에만 해당됩니다. , 당신은 그것을 얻을 수 없습니다.

그러나 방법이 있습니다:

요소를 사용하세요. width / element.currentStyle.[' 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>

<!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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Javascript에서 정보 스크롤 효과 구현 방법 공유다음 기사：Javascript에서 정보 스크롤 효과 구현 방법 공유