Heim >Web-Frontend >js-Tutorial >Fehler und Handhabungsmethoden von offsetWidth in JS
Dieser Artikel stellt hauptsächlich den OffsetWidth-Fehler und die Lösung in JavaScript im Detail vor. Interessierte Freunde können sich auf
OffsetWidth bezieht sich auf die sichtbare Breite des Objekts.
Zum Beispiel:
#p1 {
width: 100px;
height: 200px;
background: red;
}Ergebnis: 100
#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
}Ergebnis: 104 (100 + 2 + 2)
#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
padding: 20px;
}Ergebnis: 144 ( 100 + 2 + 2 + 20 + 20)
#p1 {
width: 100px;
height: 200px;
background: red;
margin: 4px;
}Ergebnis: 100
**
Also, offsetWidth = Breite + Polsterung + Rand und Marge Nichts.
**
Sehen wir uns ein Beispiel an:
<!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>Phänomene: Das rote p wird allmählich schmaler, bis es verschwindet, kein Problem!
Was wäre, wenn wir p einen Rand hinzufügen würden?
<!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>Phänomene: Das rote P wird nicht nur nicht schmaler, sondern es wird immer breiter...
*
Das Der Grund ist auch ganz einfach: Der direkte Grund für den Rand ist, dass die OffsetWidth den Rand berücksichtigt. Wenn der Timer zum ersten Mal abfragt, dann Breite: 102 - 1 == 101 Die OffsetWidth wird sofort zu 103; beim zweiten Mal wird die Breite: 103 - 1 == 102, dann wird die OffsetWidth sofort zu 104; beim dritten Mal wird die Breite: 104 - 1 == 103, die OffsetWidth wird 104...
Wenn op.style.width = op.offsetWidth - 1 + 'px'; in -2 geändert wird, bewegt sich das rote p nicht und wird nicht breiter oder schmaler, da offsetWidth 102 minus 2 ist . 100 ist gleich der ursprünglichen Breite, die offsetWidth ist gleich 100 plus 2 des Randes und wird immer noch 100 sein, sodass sie sich nicht verschiebt. .. *
Die Lösung ist auch sehr einfach. Einfach, können Sie es sich nicht leisten, zu beleidigen oder sich zu verstecken? OffsetWidth ist nicht erforderlich!<!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>Mit diesem Paket können wir die durch offsetWidth verursachten Probleme lösen<!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>[Verwandte Empfehlungen]5. Detailliertes Beispiel für die Formularvalidierung von Bootstrap
Das obige ist der detaillierte Inhalt vonFehler und Handhabungsmethoden von offsetWidth in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!