Heim >Web-Frontend >js-Tutorial >So legen Sie die Elementbreite in Javascript fest
So legen Sie die Elementbreite in Javascript fest
- 青灯夜游Original
- 2021-04-27 17:16:2311262Durchsuche
So legen Sie die Breite eines Elements in JavaScript fest: Verwenden Sie zuerst die Anweisung „document.getElementById(„id value“)“, um das Elementobjekt abzurufen. Anweisung, um die Breite des Elements festzulegen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.
Javascript legt die Breite des Elements fest
Prinzip:
Elementobjekt abrufen
Das width-Attribut des HTML-DOM-Style-Objekts legt die Breite des Elements fest.
Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
img {
width: 200px;
}
</style>
</head>
<body>
<img id="img" src="img/1.jpg" / alt="So legen Sie die Elementbreite in Javascript fest" >
<p id="demo">img图片宽度为200px。</p>
<button onclick="myFunction()">设置img图片的宽度</button>
<script>
function myFunction() {
document.getElementById("img").style.width="300px";
document.getElementById("demo").innerHTML="img图片宽度为300px。";
}
</script>
</body>
</html>Rendering:
Beschreibung: Die width-Eigenschaft des
Style-Objekts kann die Breite des Elements festlegen.
Syntax:
Object.style.width=auto|length|%
| Wert | Beschreibung |
|---|---|
| auto | Standard. Der Browser kann die tatsächliche Breite berechnen. |
| % | definiert die Breite basierend auf dem Prozentsatz des enthaltenden Blocks. |
| Länge | Verwenden Sie px, cm und andere Einheiten, um die Breite zu definieren. |
Methoden zum Finden von Elementen:
1. Holen Sie sich das Element basierend auf dem Tag-Namen
document.getElementById("id属性的值");3 Namensattribut
document.getElementsByTagName("标签的名字");4. Basierend auf dem Klassenattribut. Elemente gemäß CSS-Pfad abrufen (eins abrufen).
document.getElementsByName("name属性的值");. Elemente gemäß CSS-Pfad abrufen (eine Gruppe abrufen). Lernen:
Javascript-Tutorial für Fortgeschrittene]
Das obige ist der detaillierte Inhalt vonSo legen Sie die Elementbreite in Javascript fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!