当我在 Javascript 中调用它时，样式不适用于我的代码的一部分？
[英]The Style don't apply in a part of my code when I call it in Javascript?
问题描述
Hi everyone I'm new in Web Development, even more in Javascript.
大家好，我是 Web 开发的新手，甚至是 Javascript 的新手。 I practice some Javascript to learn it in codepen.io, and I have an issue:我在codepen.io中练习了一些Javascript来学习它，我有一个问题：
I've created an element with Javacript method createElement() => the element is a div.我使用 Javacript 方法createElement() => 创建了一个元素，该元素是一个 div。 I've styled it => it's working我已经设计了它=>它正在工作
I also created a textarea in my HTML file with a button, and put the value of the <textarea> into the div I created before (with Javascript).我还在我的 HTML 文件中创建了一个带有按钮的文本区域，并将<textarea>的值放入我之前创建的 div 中（使用 Javascript）。
The text/value (of the textarea) goes inside of the div (innerHTML) and it works fine for this part, but I want to apply some styles (with .style="{some styles goes here}" , or the method classList.add("classX") , but any of them is not working, like they all are ignored. （文本区域的）文本/值进入 div （innerHTML）内部，它适用于这部分，但我想应用一些 styles （使用.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>
1 个解决方案
解决方案1
0 已采纳 2020-07-03 13:20:04
Your .style class isn't set onto anything.您的.style class 没有设置任何东西。 If you want to style the newly added text you would need to wrap it in something (in my example I wrapped it in a span ).如果您想为新添加的文本设置样式，则需要将其包装在某些东西中（在我的示例中，我将其包装在span中）。
You could create the span in the same way you did for the div with a createElement .您可以像使用createElement创建div一样创建span 。 In my example I just made it add a string into the innerHTML which will render as the element.在我的示例中，我只是将一个字符串添加到 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.