So erhalten Sie die aktuelle Breite und Höhe des Bildes in JS-HTML-Kenntnisse-php.cn

So erhalten Sie die aktuelle Breite und Höhe des Bildes in JS

藏色散人

Freigeben： 2021-01-11 11:12:51

Original

15210 Leute haben es durchsucht

JS ruft die aktuelle Breite und Höhe des Bildes ab. Wir können die JavaScript-Attribute clientWidth und clientHeight verwenden, um sie abzurufen. Die Eigenschaften clientWidth und clientHeight repräsentieren das Abrufen der aktuellen Breite und Höhe des Bildes.

So erhalten Sie die aktuelle Breite und Höhe des Bildes in JS

Empfohlene Referenz: „JavaScript-Tutorial“

Nachfolgend stellen wir Ihnen JS anhand konkreter Codebeispiele vor. Methode zum Ermitteln der aktuellen Breite und Höhe des Bildes .

Das Codebeispiel lautet wie folgt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>js获取当前图片宽高的示例</title>
    <script type="text/javascript">
 function imgSize(){
            var myImg = document.querySelector("#sky");
            var currWidth = myImg.clientWidth;
            var currHeight = myImg.clientHeight;
 alert("当前 width=" + currWidth + ", " + "当前 height=" + currHeight);
 }
    </script>
</head>
<body>
<img src="./1/png" id="sky" style=" width:250px;">
<p><button type="button" onclick="imgSize();">获取</button></p>
</body>
</html>

Nach dem Login kopieren

Wenn wir auf die Schaltfläche „Abrufen“ klicken, wird die oben definierte Methode imgSize() aufgerufen, wobei querySelector( ) Die Methode kann das Element mit der ID="sky" im Dokument abrufen, bei dem es sich um das erhaltene IMG-Bild handelt. Rufen Sie dann die aktuelle Breite und Höhe (Einheit: Pixel) des Elements über die Eigenschaften .clientWidth und clientHeight ab.

Für das IMG-Bild hier haben wir ein Breitenattribut von 250 Pixel und eine adaptive Höhe hinzugefügt.

Der endgültige Effekt ist wie folgt:

So erhalten Sie die aktuelle Breite und Höhe des Bildes in JS

Hinweis: Das Attribut clientWidth stellt die interne Breite dar des Elements. Diese Eigenschaft umfasst Auffüllungen, jedoch keine vertikalen Bildlaufleisten (falls vorhanden), Rahmen und Ränder, und ihr Wert wird auf eine ganze Zahl gerundet.

clientHeight kann durch CSS-Höhe + CSS-Auffüllung – horizontale Bildlaufleistenhöhe (falls vorhanden) berechnet werden. Diese Eigenschaft ist eine schreibgeschützte Eigenschaft für Elemente, die weder CSS noch Inline-Layout definieren boxen ist 0, andernfalls ist es die Höhe des Elementinneren in Pixel, einschließlich Innenabstand, aber ohne horizontale Bildlaufleisten, Rahmen und Ränder.

Dieser Artikel ist eine detaillierte Einführung in JS, um die aktuelle Breite und Höhe eines Bildes zu ermitteln. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie die aktuelle Breite und Höhe des Bildes in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!