我是javascript新手，請多多包涵。當按下右箭頭鍵時，我想將 div 向右更改 100 像素。我使用自己的類創建一個正方形，然后嘗試更改此實體位置。
class Square {
constructor(length) {
this.width = length;
this.height = length;
this.div = document.createElement("div");
this.div.style.position = "absolute"; // to be able to move it
this.div.style.backgroundColor = "red";
this.div.style.width = length "px";
this.div.style.height = length "px";
document.body.appendChild(this.div);
this.xPos = 50;
this.div.style.left = this.xPos "px";
}
}
var square2 = new Square(10);
window.addEventListener(
"keydown",
function (event) {
if (event.defaultPrevented) {
return; // Do nothing if the event was already processed
}
switch (event.key) {
case "ArrowDown":
alert("ArrowDown");
// Do something for "down arrow" key press.
break;
case "ArrowUp":
// Do something for "up arrow" key press.
break;
case "ArrowLeft":
alert("ArrowLeft");
// Do something for "left arrow" key press.
break;
case "ArrowRight":
alert("ArrowRight");
square2.div.style.left = 100 "px"; // this code does nothing?
break;
default:
return; // Quit when this doesn't handle the key event.
}
// Cancel the default action to avoid it being handled twice
event.preventDefault();
},
true
);
代碼square2.div.style.left = 100 "px";什么都不做。
uj5u.com熱心網友回復：
它什么也不做，它只是不做你想做的事。
square2.div.style.left設定為50px您然后與100 'px'哪個結果連接50px100px。
常用的解決方案是每次通過剝離px，將字串轉換為數字（以避免連接）然后添加到它來決議數字。
square2.div.style.left = square2.div.style.left.replace('px', '') 100 "px";
但這充其量是麻煩的。更簡單的解決方案是宣告一個left屬性并在您的偵聽器中增加它。
class Square {
constructor(length) {
...
this.xPos = 50;
this.div.style.left = this.xPos "px";
this.left = this.xPos; //<-- declare new left prop set to initial value
}
}
window.addEventListener(
"keydown",
function (event) {
...
case "ArrowRight":
square2.left = 100; // increment left prop
square2.div.style.left = square2.left "px";
顯示代碼片段
class Square {
constructor(length) {
this.width = length;
this.height = length;
this.div = document.createElement("div");
this.div.style.position = "absolute"; // to be able to move it
this.div.style.backgroundColor = "red";
this.div.style.width = length "px";
this.div.style.height = length "px";
document.body.appendChild(this.div);
this.xPos = 50;
this.div.style.left = this.xPos "px";
this.left = this.xPos;
}
}
var square2 = new Square(10);
window.addEventListener(
"keydown",
function (event) {
if (event.defaultPrevented) {
return; // Do nothing if the event was already processed
}
switch (event.key) {
case "ArrowDown":
alert("ArrowDown");
// Do something for "down arrow" key press.
break;
case "ArrowUp":
// Do something for "up arrow" key press.
break;
case "ArrowLeft":
// Do something for "left arrow" key press.
break;
case "ArrowRight":
square2.left = 100;
square2.div.style.left = square2.left "px"; // this code does nothing?
break;
default:
return; // Quit when this doesn't handle the key event.
}
// Cancel the default action to avoid it being handled twice
event.preventDefault();
},
true
);uj5u.com熱心網友回復：
IMO 使用 vanilla js 處理 html 中視覺狀態變化的最佳方法是實際使用 vanilla CSS。它的代碼更少。它更干凈。支持其他開發人員更容易。
- 向 html 元素添加資料屬性
- 為屬性添加一個 css 類
- 為向下箭頭鍵添加事件監聽器以執行。
- 您可以對任何元素執行此操作...輸入、div 等...
input_element.addEventListener('keyup', (event) => {
if (event.key === 'ArrowUp') {
event.target.dataset.shift = 'right'
}
if (event.key === 'ArrowDown') {
event.target.dataset.shift = 'default'
}
}).shift[data-shift='right'] {
margin-left: 100px;
}<input id="input_element" class="shift" data-shift="default" />uj5u.com熱心網友回復：
class Square {
constructor(length) {
this.width = length;
this.height = length;
this.div = document.createElement("div");
this.div.style.position = "absolute"; // to be able to move it
this.div.style.backgroundColor = "red";
this.div.style.width = length "px";
this.div.style.height = length "px";
document.body.appendChild(this.div);
this.xPos = 50;
this.div.style.left = this.xPos "px";
}
}
var square2 = new Square(10);
window.addEventListener(
"keydown",
function (event) {
// if (event.defaultPrevented) {
// return; // Do nothing if the event was already processed
// }
console.log(event.key)
switch (event.key) {
case "ArrowDown":
alert("ArrowDown");
// Do something for "down arrow" key press.
break;
case "ArrowUp":
// Do something for "up arrow" key press.
break;
case "ArrowLeft":
alert("ArrowLeft");
// Do something for "left arrow" key press.
break;
case "ArrowRight":
alert("ArrowRight");
square2.div.style.marginLeft = 100 "px"; // this code does nothing?
break;
default:
return; // Quit when this doesn't handle the key event.
}
// Cancel the default action to avoid it being handled twice
event.preventDefault();
},
true
);轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/482090.html
標籤：javascript