如何使用JS在提交表单后向元素添加CSS
我目前正在创建一个模因生成器应用程序，用户可以在其中提交图像以及顶部和底部文本。我想让它在提交表单后，将文本添加到图像上并使用 CSS 设置样式。我已经尝试向元素添加一个类并向其添加 css，但这不起作用。这是我的代码：
JS
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
//create the divs for the memes
let newDiv = document.createElement('div');
form.appendChild(newDiv);
topTxt.classList.add('top')
bottomTxt.classList.add('bottom')
memePic.src = img.value;
newDiv.append(memePic, topTxt.value, bottomTxt.value);
//set the textbox inputs equal to nothing
img.value = '';
topTxt.value = '';
bottomTxt.value= '';
})
CSS
div {
width: 30%;
height: 300px;
margin: 10px;
display: inline-block;
}
img {
width: 100%;
height: 100%;
margin: 10px;
display: inline-block;
}
.top{
color: blue;
}
#bottom-txt {
color: red;
}
HTML
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<script src="meme.js"></script>
</body>
</html>
慕哥92293981回答
-
汪汪一只猫
您只需要修复一些元素在提交后的logic状态。appendedform为此，您需要在您将持有您div之后，然后命令您进行展示。我还在每个显示之间添加了一条线。formresultselementhrseparatorresults你可以style按照你希望的方式来设置你的元素——我已经添加了一些基本的CSS来显示一些样式和一个img仅用于演示目的的实际 url。现场工作演示：let form = document.querySelector('#meme-form');let img = document.querySelector('#img');let topTxt = document.querySelector('#top-txt');let bottomTxt = document.querySelector('#bottom-txt');let results = document.querySelector('.meme-results');form.addEventListener('submit', function(e) { e.preventDefault(); let memePic = document.createElement('img'); var hrLine = document.createElement('hr'); //create the divs for the memes let newDiv = document.createElement('div'); let topText = document.createElement('span'); let bttomText = document.createElement('span'); //Top text topText.classList.add('top') topText.textContent = topTxt.value //Img memePic.src = img.value; results.appendChild(topText); results.append(memePic); //bottom text bttomText.classList.add('bottom') bttomText.textContent = bottomTxt.value results.append(bttomText); results.append(hrLine); //set the textbox inputs equal to nothing //img.value = ''; topTxt.value = ''; bottomTxt.value = '';}).meme-results { width: 30%; height: 300px; margin: 10px; display: block;}img { width: 100%; height: 100%; display: block;}.top, #top-txt { color: blue;}.bottom, #bottom-txt { color: red;}<html><body> <form action="" id="meme-form"> <label for="image">img url here</label> <input id="img" type="url" value="https://via.placeholder.com/150"><br> <label for="top-text">top text here</label> <input id="top-txt" type="text"><br> <label for="bottom-text">bottom text here</label> <input id="bottom-txt" type="text"><br> <input type="submit"><br> </form> <div class="meme-results"></div> <script src="meme.js"></script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript