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

Question

我要increase/decreasefont-size[=使用 createElement 和 javascript 创建的每个输入字段的 37=]。 =19=]

这种做法的一个很好的例子是 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(); } });

Answer 1

最好的方法是给每个创建的元素一个 class。您可以在 JavaScript.

中动态添加和删除 CSS 定义

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

另一种选择是在创建元素的地方创建一个 "factory"，设置其所有属性，然后 return 新元素。调用它而不是 createElement 方法。

最终方法可行，但我强烈反对它：用您自己的工厂覆盖 createElement 方法。我非常不鼓励它，我什至不会描述如何去做。

Answer 2

生成新的input后，里面有文字，点击A或者a左上角并查看下面的内联评论：

const input1 = document.querySelector('.input1');

// Keep this out of the event handler so you don't have to
// keep scanning for the same element over and over.
let contentInput = document.getElementById('inputcontent');
    
const inputAdd = input1.addEventListener('keydown', function(e){
    if((e.keyCode === 13)){
      let inptPlus = document.createElement("input");
      // Don't use inline styles if you can avoid it.
      // They make it more difficult to override later and
      // they result in a lot of code duplication. Just
      // apply/remove pre-made CSS classes instead.
      // Also, to be able to differentiate dynamically created elements
      // from static ones, give the new elements a class
      inptPlus.classList.add("dynamic");

      // Always append after configuration is complete
      contentInput.appendChild(inptPlus); 
      inptPlus.focus();
    }
});

// Handle clicks at the document level
document.addEventListener("click", function(event){
  // Check to see if a font size span was clicked
  if(event.target.classList.contains("changeSize")){
  
    // Check to see which one
    let sizeChange = event.target.classList.contains("bigger") ? 1 : -1;
  
    // Loop over all dynamically created inputs
    document.querySelectorAll(".dynamic").forEach(function(input){
      // Reset the font size to the current size plust the adjustment amount
      input.style.fontSize = parseFloat(getComputedStyle(input).fontSize) + sizeChange + "px";
    });
  }
});

*{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    body {
      font-family: sans-serif;
      background: #333333;
    }
    /* All new controls will have this style */
    .dynamic {
      width: 500px;
      margin-left:50px;
      margin-top:1px;
      border:0 solid;
    }
    
    /* Just for the A and a at the top-left */
    .bigger, .smaller { color:#fff; font-weight:bold; font-size:1.2em; cursor:pointer; }    
    
    #paper{
      background: white;
      width: 600px;
      height: 900px;
      margin-left: 500px;
      margin-top: 50px;
    }
    
    .input1{
      margin-top: 75px;
      margin-left: 50px;
      width: 500px;
      border: 1px solid;
    }
    
    #inputcontent{
      border: 1px solid black;
    }
    
    #nav{
      width: 1000px;
      height: 40px;
      background: darkgreen;
      position: absolute;
      top: 10px;
      left: 350px;
    }

<!DOCTYPE html>
    <html>
    
    <head>
     <title>Parcel Sandbox</title>
     <meta charset="UTF-8" />
    </head>
    
    <body>
      <span class="changeSize bigger">A</span>  <span class="changeSize smaller">a</span>
     <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>

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

how to set the same font size as previous input on a createElement input? [Javascript]

javascript

input

font-size