gpt4 book ai didi

javascript - 如何在 createElement 输入上设置与先前输入相同的字体大小? [Javascript]

转载 作者:行者123 更新时间:2023-12-01 00:19:24 24 4
gpt4 key购买 nike

我想要增加/减少每个输入的字体大小已使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com