JS의 offsetWidth 버그 및 처리 방법
- Y2J원래의
- 2018-05-14 16:40:222759검색
이 기사에서는 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('p1');
setInterval(function() {
op.style.width = op.offsetWidth - 1 + 'px';
}, 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('p1');
setInterval(function() {
op.style.width = op.offsetWidth - 1 + 'px';
}, 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로 작성된 요소의 행간 스타일에만 해당됩니다. , 당신은 그것을 얻을 수 없습니다.
그러나 방법이 있습니다:
- IE가 아닌 경우 getCompulatedStyle(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('p1'); function getStyle(obj, attr) { if (obj.currentStyle) {//IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } alert(getStyle(op, 'width'));//直接弹出 “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('p1');
function getStyle(obj, attr) {
if (obj.currentStyle) {//IE
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
setInterval(function() {
//parseInt是因为getStyle()返回的是‘px'带单位，要整数化
op.style.width = parseInt(getStyle(op, 'width')) - 1 + 'px';
}, 30);
</script>
</body>
</html>로 인한 문제를 해결할 수 있습니다.
위 내용은 JS의 offsetWidth 버그 및 처리 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!