使用 onMount 将 class 动态添加到元素

Question

使用工兵。尝试创建输入并将 2 classes“名称边框”分配给动态创建的输入元素。该元素已创建，但未应用 class。不知道为什么，希望有人能帮助我。样式部分有两个 classes“name”和“border”，如果我将它们应用到我的 html 中的常规输入，它们将起作用并应用于像这样创建的任何输入：

<input class="name border"/>

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

 <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>

我做错了什么？

Answer 1

Svelte 将删除未使用的样式。在这种情况下，样式不会被 Svelte 使用，而是有效地用于嵌套的纯 js 组件。如果您将它们设为全局 Svelte 将不会删除它们。

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

使用 onMount 将 class 动态添加到元素

using onMount to add class dynamically to element

javascript

css

sapper

svelte-3

svelte-component