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!- Element verwenden.
- In Nicht-IE verwenden Sie 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('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><!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>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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1392
52
So verwenden Sie JS und Baidu Maps, um die Kartenschwenkfunktion zu implementieren
Nov 21, 2023 am 10:00 AM
So implementieren Sie die Kartenschwenkfunktion mit JS und Baidu Map. Baidu Map ist eine weit verbreitete Kartendienstplattform, die häufig zur Anzeige geografischer Informationen, Positionierung und anderer Funktionen in der Webentwicklung verwendet wird. In diesem Artikel wird erläutert, wie Sie mit JS und der Baidu Map API die Kartenschwenkfunktion implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Vorbereitung Bevor Sie die Baidu Map API nutzen können, müssen Sie zunächst ein Entwicklerkonto auf der Baidu Map Open Platform (http://lbsyun.baidu.com/) beantragen und eine Anwendung erstellen. Erstellung abgeschlossen
Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung
Apr 03, 2024 am 11:55 AM
Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert
So erstellen Sie ein Aktien-Candlestick-Diagramm mit PHP und JS
Dec 17, 2023 am 08:08 AM
So verwenden Sie PHP und JS zum Erstellen eines Aktienkerzendiagramms. Ein Aktienkerzendiagramm ist eine gängige technische Analysegrafik auf dem Aktienmarkt. Es hilft Anlegern, Aktien intuitiver zu verstehen, indem es Daten wie den Eröffnungskurs, den Schlusskurs, den Höchstkurs usw niedrigster Preis der Aktie. In diesem Artikel erfahren Sie anhand spezifischer Codebeispiele, wie Sie Aktienkerzendiagramme mit PHP und JS erstellen. 1. Vorbereitung Bevor wir beginnen, müssen wir die folgende Umgebung vorbereiten: 1. Ein Server, auf dem PHP 2. Ein Browser, der HTML5 und Canvas 3 unterstützt
Was bedeutet Spielfehler?
Feb 18, 2024 am 11:30 AM
Was bedeuten Spielfehler? Während des Spielens stoßen wir oft auf unerwartete Fehler oder Probleme, wie zum Beispiel, dass Charaktere stecken bleiben, Aufgaben nicht fortgesetzt werden können, Bildschirmflimmern usw. Diese abnormalen Phänomene werden Game Bugs genannt, also Störungen oder Irrtümer im Spiel. In diesem Artikel untersuchen wir, was Spielfehler bedeuten und welche Auswirkungen sie auf Spieler und Entwickler haben. Spielfehler beziehen sich auf Fehler, die während der Entwicklung oder des Betriebs des Spiels auftreten und dazu führen, dass das Spiel nicht normal läuft oder sich unerwartet verhält. Diese Fehler können darauf zurückzuführen sein
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS
Dec 17, 2023 pm 06:55 PM
Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen in PHP und JS. Mit der rasanten Entwicklung des Internets und der Technologie ist der Aktienhandel für viele Anleger zu einer wichtigen Möglichkeit geworden. Die Aktienanalyse ist ein wichtiger Teil der Anlegerentscheidung, und Kerzendiagramme werden häufig in der technischen Analyse verwendet. Wenn Sie lernen, wie man Kerzendiagramme mit PHP und JS zeichnet, erhalten Anleger intuitivere Informationen, die ihnen helfen, bessere Entscheidungen zu treffen. Ein Candlestick-Chart ist ein technischer Chart, der Aktienkurse in Form von Candlesticks anzeigt. Es zeigt den Aktienkurs
Zusammenfassung der Apple iOS18-Fehler
Jun 14, 2024 pm 01:48 PM
Als die WWDC-Konferenz 2024 von Apple erfolgreich zu Ende ging, wurde nicht nur macos15 angekündigt, sondern auch das Update von Apples neuem iOS18-System erregte die meiste Aufmerksamkeit. Obwohl es viele neue Funktionen gibt, fragen sich die Leute unweigerlich, ob dies die erste Version von Apples iOS18 ist Es ist notwendig, Apple iOS18 zu aktualisieren. Welche Art von Fehlern gibt es in der neuesten Version von Apple iOS18? Nach der tatsächlichen Nutzungsbewertung finden Sie im Folgenden eine Zusammenfassung der Apple iOS18-Fehler. Werfen wir einen Blick darauf. Derzeit beeilen sich viele iPhone-Benutzer, auf iOS18 zu aktualisieren. Allerdings bereiten verschiedene Systemfehler den Menschen Unbehagen. Einige Blogger sagten, dass man beim Upgrade auf iOS18 vorsichtig sein sollte, weil „es so viele Fehler gibt“. Der Blogger sagte, wenn Ihr iPhone ist
So verwenden Sie JS und Baidu Map, um die Funktion zur Verarbeitung von Kartenklickereignissen zu implementieren
Nov 21, 2023 am 11:11 AM
Überblick über die Verwendung von JS und Baidu Maps zum Implementieren von Funktionen zur Verarbeitung von Kartenklickereignissen: In der Webentwicklung ist es häufig erforderlich, Kartenfunktionen zum Anzeigen des geografischen Standorts und geografischer Informationen zu verwenden. Die Verarbeitung von Klickereignissen auf der Karte ist ein häufig verwendeter und wichtiger Teil der Kartenfunktion. In diesem Artikel wird erläutert, wie Sie mithilfe von JS und der Baidu-Karten-API die Klickereignisverarbeitungsfunktion der Karte implementieren, und es werden spezifische Codebeispiele angegeben. Schritte: Importieren Sie die API-Datei von Baidu Map. Importieren Sie zunächst die Datei von Baidu Map API in die HTML-Datei.
So verwenden Sie JS und Baidu Maps, um die Karten-Heatmap-Funktion zu implementieren
Nov 21, 2023 am 09:33 AM
Verwendung von JS und Baidu Maps zur Implementierung der Karten-Heatmap-Funktion Einführung: Mit der rasanten Entwicklung des Internets und mobiler Geräte sind Karten zu einem häufigen Anwendungsszenario geworden. Als visuelle Darstellungsmethode können Heatmaps uns helfen, die Verteilung von Daten intuitiver zu verstehen. In diesem Artikel wird die Verwendung von JS und der Baidu Map API zur Implementierung der Karten-Heatmap-Funktion vorgestellt und spezifische Codebeispiele bereitgestellt. Vorbereitung: Bevor Sie beginnen, müssen Sie Folgendes vorbereiten: ein Baidu-Entwicklerkonto, eine Anwendung erstellen und den entsprechenden AP erhalten
