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

问题描述 投票:0回答:1

我要<< [[增加/减少 [[font-size>已使用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用createElement创建的每个输入字段的字体大小。 Word Online是这种做法的一个很好的例子。当您增加...的字体大小时]]
javascript input font-size
1个回答
0
投票
最好的方法是给每个创建的元素一个类。您可以在JavaScript中动态添加和删除CSS定义。

另一个选择是编写一个函数,该函数手动设置HTML元素上的所有属性,并在每次创建元素时调用该函数。

© www.soinside.com 2019 - 2024. All rights reserved.