首页猿问如何使用JS在提交表单后向元素添加CSS

如何使用JS在提交表单后向元素添加CSS

JavaScript

慕哥9229398 2023-03-18 17:30:25

我目前正在创建一个模因生成器应用程序，用户可以在其中提交图像以及顶部和底部文本。我想让它在提交表单后，将文本添加到图像上并使用 CSS 设置样式。我已经尝试向元素添加一个类并向其添加 css，但这不起作用。这是我的代码：

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>

<label for="bottom-text">bottom text here</label>

</form>

</body>

</html>

查看完整描述

1 回答

汪汪一只猫

TA贡献1659条经验获得超1个赞

您只需要修复一些元素在提交后的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>

<label for="bottom-text">bottom text here</label>

</form>

</body>

</html>

反对回复 2天前

1 回答
0 关注
6 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

如何使用JS在提交表单后向元素添加CSS

如何使用JS在提交表单后向元素添加CSS

1 回答

添加回答