大家好,我是Web开发方面的新手,更多的是JavaScript方面的新手。 我在codepen.io中练习了一些Javascript来学习它,但我遇到了一个问题:
我用Javacript方法createElement()
=>创建了一个元素; 元素是div。 我把它的样式设置为=>; 它起作用了
我还用一个按钮在HTML文件中创建了一个textarea,并将的值放入我之前创建的div中(用Javascript)。
textarea的text/value位于div(innerHTML)的内部,这部分可以正常工作,但是我想应用一些样式(使用.style=“{some styles goes here}”
或方法classlist.add(“classx”)
,但是它们都不能工作,就像它们都被忽略了一样。
null
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>
null
您的.style
类没有设置到任何内容上。 如果您想对新添加的文本进行样式化,您需要将其包装在某个东西中(在我的示例中,我将其包装在span
)。
您可以使用CreateElement
创建span
,方法与使用CreateElement
创建div
相同。 在我的示例中,我只是让它向innerHTML中添加一个字符串,它将作为元素呈现。
null
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>