Javascript 使用onMount向元素动态添加类

使用蓝宝石。尝试创建一个输入，并为动态创建的输入元素分配两个类“名称边框”。已创建元素，但未应用该类。不知道为什么，希望有人能帮我。样式部分有两个类“name”和“border”，如果我将它们应用于html中的常规输入，它们将工作并应用于以下创建的任何输入：

<input class="name border"/>

但是使用动态创建的输入，样式类不会添加到创建的元素中。我的简单组件具有以下功能：

 <script>
  import { onMount } from 'svelte';
    
  function getinfo(){
  let x = document.querySelectorAll('input')
  for (let i = 0; i < x.length; i++) {
                 let values = x[i].value;
                 console.log("input-value: ", values)
               } 
     
  }
  
       onMount( () => {
       
       var adiv = document.createElement('div');
       var firstinput = document.createElement('input')       
       firstinput.classList.add("name")
       adiv.appendChild(firstinput); 
      
    
       var parent = document.getElementById("parent");
       parent.appendChild(adiv);         
        
       // Apply the style class "name" settings to the input element
       document.querySelector("input").classList.add("name")
    
       var secondinput = document.createElement('input');      
       adiv.appendChild(secondinput);
       }
         
    ) //onMount
                
</script>

<style>
  /* to create a bigger input */
  .name{
  font-size: 16pt;
  height: 50px;
  }
          
  .border {
   border-style : solid;
  }

</style>

<h1> Enter Items </h1>

<form id="mainform" name="formcollect"  on:submit|preventDefault={getinfo}>
      
    <div class="parent" id="parent">         
    </div>        
 
    <button type="submit">SAVE</button>
</form>

从“svelte”导入{onMount}；
函数getinfo（）{
设x=document.querySelectorAll（'input'））
for（设i=0；i{
var adiv=document.createElement（'div'）；
var firstinput=document.createElement（'input'）
firstinput.classList.add（“名称”）
adiv.appendChild（第一次输入）；
var parent=document.getElementById（“父项”）；
父母、子女（adiv）；
//将样式类“名称”设置应用于输入元素
document.querySelector（“输入”）.classList.add（“名称”）
var secondinput=document.createElement（'input'）；
adiv.appendChild（第二输入）；
}
)//onMount
/*创造更大的投入*/
.姓名{
字号：16pt；
高度：50px；
}
.边界{
边框样式：实心；
}
输入项目
拯救

---

我做错了什么？

Svelte将删除未使用的样式。在这种情况下，Svelte不使用这些样式，它们有效地用于嵌套的纯js组件。如果你让他们全球苗条不会删除他们

<style>
  /* to create a bigger input */
  :global(.name) {
      font-size: 16pt;
      height: 50px;
  }
      
  :global(.border) {
      border-style : solid;
  } 
</style>

/*创造更大的投入*/
：全局（.name）{
字号：16pt；
高度：50px；
}
：全局（.border）{
边框样式：实心；
} 

Svelte将删除未使用的样式。在这种情况下，Svelte不使用这些样式，它们有效地用于嵌套的纯js组件。如果你让他们全球苗条不会删除他们

<style>
  /* to create a bigger input */
  :global(.name) {
      font-size: 16pt;
      height: 50px;
  }
      
  :global(.border) {
      border-style : solid;
  } 
</style>

/*创造更大的投入*/
：全局（.name）{
字号：16pt；
高度：50px；
}
：全局（.border）{
边框样式：实心；
} 

非常感谢。你的回答总是很有帮助的。与原始问题无关，但与您的答案相关：将我的css置于全局中是否仍适用于当前组件，或者该类对其他组件可用？名称：global让我想知道什么时候应该使用：global？正如您所怀疑的那样，：global（）删除了作用域。少用一点，非常感谢。你的回答总是很有帮助的。与原始问题无关，但与您的答案相关：将我的css置于全局中是否仍适用于当前组件，或者该类对其他组件可用？名称：global让我想知道什么时候应该使用：global？正如您所怀疑的那样，：global（）删除了作用域。少用它。