javascript - 当我在 Javascript 中调用它时,样式不适用于我的代码的一部分?
问题描述
大家好,我是 Web 开发的新手,更擅长 Javascript。我在 codepen.io 中练习了一些 Javascript 来学习它,但我遇到了一个问题:
我用 Javacript 方法创建了一个元素createElement()
=> 元素是一个 div。我已经设计了它=>它正在工作
我还在我的 HTML 文件中创建了一个带有按钮的文本区域,并将 的值<textarea>
放入我之前创建的 div 中(使用 Javascript)。
(文本区域的)文本/值位于 div (innerHTML)内部,它适用于这部分,但我想应用一些样式(with.style="{some styles goes here}"
或 method 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>
解决方案
您的.style
课程没有设置任何内容。如果您想为新添加的文本设置样式,则需要将其包装在某些东西中(在我的示例中,我将其包装在 a 中span
)。
您可以使用与创建相同span
的方式创建。在我的示例中,我只是将一个字符串添加到 innerHTML 中,该字符串将呈现为元素。div
createElement
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>
推荐阅读
- sql - 单一查询中的多种货币转换
- powershell - 当脚本执行完成并执行下一个任务时,从 Azure DevOps Server 构建中的 PowerShell 脚本运行的 exe 是否会被终止?
- swiftui - 图像 SwiftUI 上的点击手势
- inno-setup - 在 Inno Setup 中卸载旧版本并安装新版本
- cls - 将 amp-ad 和 amp-fx-collection 与属性(例如 fly-in-left 和 fly-in-right)一起使用是否会影响 CLS?
- outlook - 我可以使用 Outlook 加载项检查我的电子邮件的多个回复吗?
- angular - 角度视图电子邮件
- iis - 如果文件名不是拉丁文,则 Plesk for windows 备份名称错误
- r - 将 char 转换为 num R
- javascript - After Effects 脚本:将多个字符样式从父文本继承到子文本