Ich möchte die div Größe ändern, wenn ich einen bestimmten Buchstaben auf der Tastatur drücken

index.htmlIch möchte die div Größe ändern, wenn ich einen bestimmten Buchstaben auf der Tastatur drücken

<body id="body"> 
    <div id="box1" class="box"></div> 
    <script type="text/javascript" src="js/main.js"></script> 
</body>

style.css

.box { 

    padding: 2em; 
    margin: 0 auto; 
    top: 50%; 
    left: 50%; 
    height: 100px; 
    width: 100px; 
    background-color: green; 
}

ich mit JavaScript versuchen, eine Funktion zu tun, wenn Sie die Taste "e" auf der Tastatur, dass Sie automatisch + 10 px zur div (Box) Größe hinzufügen. Es ist wie folgt aussehen:

main.js

document.onkeydown = function (event) { 
    var key = event.keyCode || event.which; 
    switch (key) { 
    case 81: 
     var main = document.getElementsByClassName('box').offsetHeight; 
     var sidebar = document.getElementsByClassName('box').offsetWidth; 
     main += 10 +'px'; 
     sidebar += 10 +'px' 
     break; 
    default: 
     console.log('option no valid!'); 
    } 
};

Aber es funktioniert nicht.

Quelle

2017-01-08 Georges Kayembe

Sie haben eine Vielzahl von Dingen falsch mit Ihrem Code ...

Zuerst Sie Berechnungen main und sidebar waren falsch einzustellen und in Verkettung führen würde, anstatt hinaus.

Sie haben auch nichts mit den neu berechneten Werten gemacht. Nur weil Sie eine Variable setzen, die einer Eigenschaft entspricht, bedeutet das nicht, dass Sie eine bidirektionale Bindung an diese Eigenschaft haben. Alles, was Sie tun, ist den Wert zu bekommen. Wenn Sie einen Wert festlegen möchten, müssen Sie in die Eigenschaft zurückschreiben. Ich nehme an, Sie wollten die height und width der Box ändern (offsetheight und offsetwidth sind schreibgeschützt). Wenn Sie nach einem Element mit querySelectorAll() suchen, wird ein Array-ähnliches Objekt zurückgegeben, das alle Elemente enthält, die der Abfrage entsprechen. Sie müssen das Element, das Sie verwenden möchten, aus der Auflistung mit einem Index abrufen. Wenn Sie nur ein Element mit Ihrer Abfrage erwarten, verwenden Sie querySelector() anstelle von querySelectorAll(), da querySelector() einen Verweis auf das gefundene Element direkt zurückgibt (also kein Index erforderlich ist) und dann die Suche beendet.

Als nächstes wird der e Schlüsselcode ist 69, nicht 81.

document.onkeydown = function (event) { 
 
    var key = event.keyCode || event.which; 
 
    console.log("Key code is: " + key + " - Key pressed was: " + String.fromCharCode(key)); 
 
    switch (key) { 
 
    case 69: 
 
     // Note the [0] at the end of this line to extract the first 
 
     // element in the set of matched elments. 
 
     var box = document.getElementsByClassName('box')[0]; 
 
     
 
     // Get the values you need 
 
     var main = box.offsetHeight; 
 
     var sidebar = box.offsetWidth; 
 
     
 
     // Do the math first, then concatenate the "px" and assign the answer back to the variable 
 
     main = (main + 10) +'px'; 
 
     sidebar = (sidebar + 10) +'px' 
 
     
 
     // Now use the new values by assigning them to the correct properties of the object: 
 
     box.style.height = main; 
 
     box.style.width = sidebar; 
 
     break; 
 
    default: 
 
     console.log('option no valid!'); 
 
     break; 
 
    } 
 
}

.box { 
 
    padding: 2em; 
 
    margin: 0 auto; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 5px; 
 
    width: 5px; 
 
    background-color: green; 
 
}

<div id="box1" class="box"></div>

Quelle

2017-01-08 22:45:39

Excellent! Vielen Dank für Ihre Ratschläge! Ich schätze, danke! –

Ich möchte die div Größe ändern, wenn ich einen bestimmten Buchstaben auf der Tastatur drücken

Antwort

Verwandte Themen