当用户按下向上箭头时，我尝试不断地将气球表情符号的大小增加 10px，并使用键盘上的向下箭头将大小减小 10px。
我一直在尝试设置:
let size = para.style.fontSize;
为了获取大小变量，然后通过在我的函数中添加 +/- 10px 来调整该值。不过我试过这个方法，好像不能设置:
para.style.fontSize = size +10;
有人有任何建议让它发挥作用吗？
注意:我没有在下面的代码中包含大小变量，因为我发现它不起作用。
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 50px;
}
</style>
</head>
<body>
<p>🎈</p>
<script>
let para = document.querySelector('p');
window.addEventListener("keydown", e => {
if (e.key == "ArrowUp") {
para.style.fontSize = '60px';
} else {
para.style.fontSize = '40px';
}
});
</script>
</body>
</html>最佳答案
要在多个 keydown 事件上实现增大/缩小行为，您需要递增/递减每个事件的 para.style.fontSize。完成此操作的方法如下:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 50px;
}
</style>
</head>
<body>
<p>🎈</p>
<script>
let para = document.querySelector('p');
window.addEventListener("keydown", e => {
let currentSize = parseInt(para.style.fontSize);
// If unable to determine current fontSize, default to 50
if (isNaN(currentSize)) {
currentSize = 50;
}
// Define the rate of change
let changeAmount = 5;
if (e.key == "ArrowUp") {
para.style.fontSize = (currentSize + changeAmount) + 'px';
} else {
// Protect againt zero or negative font sizes via Math.max()
para.style.fontSize = Math.max(changeAmount, currentSize - changeAmount) + 'px';
}
});
</script>
</body>
</html>关于javascript - 如何在 Javascript 中使用 'ArrowUp' 增加表情符号的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53938789/