JS의 offsetWidth 버그 및 처리 방법-JS 튜토리얼-php.cn

JS의 offsetWidth 버그 및 처리 방법

Y2J

풀어 주다： 2018-05-14 16:40:22

원래의

2776명이 탐색했습니다.

이 기사에서는 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 = 너비 + 패딩 + 테두리, 여백과 관련이 없습니다 .

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

<!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가 좁아지지 않을 뿐만 아니라 점점 넓어지는...

이유는 또한 매우 간단합니다. 테두리입니다. 직접적인 이유는 Timer가 폴링할 때 처음으로 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로 변경하면 offsetWidth가 102이고 빼기 2가 100이고 원래 너비가 동일하기 때문에 빨간색 p가 움직이지 않고 더 넓어지거나 좁아지지 않습니다. 다음에 루프할 때 offsetWidth는 100에 테두리의 2를 더한 값과 같고, 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 무료 동영상 튜토리얼

2 .

JavaScript 양식 검증 구현 코드_javascript 기술

JS 한 줄로 모바일 화폐 형식 검증 구현

4 .

vue v -모델 폼 컨트롤 바인딩 예제 튜토리얼

부트스트랩 폼 유효성 검사 폼의 상세 예

위 내용은 JS의 offsetWidth 버그 및 처리 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!