我想要增加/减少每个输入的字体大小已使用 JavaScript createElement 创建的字段。
这种做法的一个很好的例子是 Word Online 。
当您增加输入字段的font-size 时，每个输入字段的font-size 将保持不变。我自己没有尝试过，因为我不知道从哪里开始。
这是我的 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="nav"> </div>
<div id="paper">
<div id="inputcontent">
<input type="text" class="input1">
</div>
</div>
<script src="src/index.js">
</script>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background: #333333;
}
#paper{
background: white;
width: 600px;
height: 900px;
margin-left: 500px;
margin-top: 50px;
}
.input1{
margin-top: 75px;
margin-left: 50px;
width: 500px;
border: 0px solid;
}
#inputcontent{
border: 1px solid black;
}
#nav{
width: 1000px;
height: 40px;
background: darkgreen;
position: absolute;
top: 10px;
left: 350px;
}
Javascript:
import "./styles.css";
const input1 = document.querySelector('.input1');
const inputAdd = input1.addEventListener('keydown', function(e){
if((e.keyCode === 13)){
let inptPlus = document.createElement("input");
let contentInput = document.getElementById('inputcontent');
contentInput.appendChild(inptPlus);
inptPlus.style.width = "500px";
inptPlus.style.marginLeft = "50px";
inptPlus.style.marginTop = "1px";
inptPlus.style.border = "0px solid";
inptPlus.focus();
}
});
最佳答案
最好的方法是为每个创建的元素指定一个类。您可以在 JavaScript 中动态添加和删除 CSS 定义。
另一种选择是编写一个函数来手动设置 HTML 元素的所有属性，并在每次创建元素时调用该函数。
另一个选择是创建一个“工厂”，您可以在其中创建元素，设置其所有属性，然后返回新元素。调用该方法而不是 createElement 方法。
最后一种方法可行，但我强烈建议不要这样做:用您自己的工厂覆盖 createElement 方法。我非常不鼓励这样做，我什至不会描述如何去做。
关于javascript - 如何在 createElement 输入上设置与先前输入相同的字体大小？ [Javascript]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59545132/