当我在 Javascript 中调用它时，样式不适用于我的代码的一部分？答案

【问题标题】：The Style don't apply in a part of my code when I call it in Javascript?当我在 Javascript 中调用它时，样式不适用于我的代码的一部分？
【发布时间】：2020-07-03 13:07:58
【问题描述】：

大家好，我是 Web 开发新手，尤其是 Javascript 新手。我在codepen.io中练习了一些Javascript来学习它，我有一个问题：

我使用 Javacript 方法 createElement()=> 创建了一个元素，该元素是一个 div。我已经设计了它=>它正在工作

我还在我的 HTML 文件中创建了一个带有按钮的文本区域，并将 <textarea> 的值放入我之前创建的 div 中（使用 Javascript）。

（文本区域的）文本/值进入 div（innerHTML）内部，它适用于这部分，但我想应用一些样式（使用 .style="{some styles goes here}"，或方法 classList.add("classX")，但任何其中一些不起作用，就像它们都被忽略了一样。

let div = document.createElement('div');
document.body.appendChild(div);
div.classList.add("test");

// Ici j'attrape l'INPUT
let inputText = document.querySelector("#txtarea");

//Ici j'atrappe le boutton => qui me permettra plus tard d'envoyer la valeur de ce que l'utilisateur aura écris dans l'input précédent au sen de la div à fond Jaune
let btn_send = document.querySelector("button");

//Processus d'envoi de la valeur 
btn_send.addEventListener("click", function() {
  //   Variable me permettant de mettre la main sur la valeur de l'input
  let value_style = inputText.value;


  //Intégration du text avec InnerHTML dans la div
  setTimeout
    (function() {
      div.innerHTML = value_style;
    }, 1000);


  // ajout de style au texte que l'on va envoyer dans la Div 


  //L'on vide l'input de sa valeur => pour renvoyer une  nouvellle valeur 
  inputText.value = "";
})

* {
  margin: 0;
  box-sizing: border-box;
}

h1 {
  background: red;
}

.test {
  background-color: yellow;
  height: 45vh;
  width: 90%;
  border: 1px outset black;
  margin: 11vh auto;
}

.style {
  text-align: center;
  font-family: 'Helvetica', sans-serif;
  color: #64a;
  padding: 10px;
  border: 1px solid blue;
  background-color: #66e;
}

<!DOCTYPE html>
<html lang="fr">

<head>
  <title>Test</title>
</head>
<meta charset="utf-8">

<body>
  <header></header>
  <footer></footer>
  <label>Tapez quelque chose à afficher dans la div à fond jaune:</label>
  <textarea id="txtarea" placeholder="..."></textarea>
  <button>Appuyez pour envoyer</button>
</body>



</html>

【问题讨论】：

密码笔：codepen.io/ZakWebHunter/pen/ZEQvMLN
您不能将样式添加到纯文本中（这就是 innerHTML 在 JS 变量中的情况）。您必须向 div 本身添加一个类，就像您在创建 div 时所做的那样，即将div.classList.add("style") 放入超时回调中。

标签： javascript html css styles innerhtml

【解决方案1】：

你的.style 类没有设置任何东西。如果您想为新添加的文本设置样式，则需要将其包装在某些东西中（在我的示例中，我将其包装在 span 中）。

您可以像创建div 一样使用createElement 创建span。在我的示例中，我只是让它在 innerHTML 中添加一个字符串，该字符串将呈现为元素。

let div = document.createElement('div');
document.body.appendChild(div);
div.classList.add("test");

// Ici j'attrape l'INPUT
let inputText = document.querySelector("#txtarea");

//Ici j'atrappe le boutton => qui me permettra plus tard d'envoyer la valeur de ce que l'utilisateur aura écris dans l'input précédent au sen de la div à fond Jaune
let btn_send = document.querySelector("button");

//Processus d'envoi de la valeur 
btn_send.addEventListener("click", function() {
  //   Variable me permettant de mettre la main sur la valeur de l'input
  let value_style = inputText.value;


  //Intégration du text avec InnerHTML dans la div
  setTimeout
    (function() {
      div.innerHTML += `<span class="style">${value_style}</span>`;
    }, 1000);


  // ajout de style au texte que l'on va envoyer dans la Div 


  //L'on vide l'input de sa valeur => poir renvoyer une       vouvellle valeur 
  inputText.value = "";
})

* {
  margin: 0;
  box-sizing: border-box;
}

h1 {
  background: red;
}

.test {
  background-color: yellow;
  height: 45vh;
  width: 90%;
  border: 1px outset black;
  margin: 11vh auto;
}

.style {
  text-align: center;
  font-family: 'Helvetica', sans-serif;
  color: #64a;
  padding: 10px;
  border: 1px solid blue;
  background-color: #66e;
}

<!DOCTYPE html>
<html lang="fr">

<head>
  <title>Test</title>
</head>
<meta charset="utf-8">

<body>
  <header>

  </header>


  <footer>

  </footer>
  <label>Tapez quelque chose à afficher dans la div à fond jaune:</label>
  <textarea id="txtarea" placeholder="..."></textarea>
  <button>Appuyez pour envoyer</button>

</body>



</html>

【讨论】：