首頁猿問如何使用JS在提交表單后向元素添加CSS

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

JavaScript

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

我目前正在創建一個模因生成器應用程序，用戶可以在其中提交圖像以及頂部和底部文本。我想讓它在提交表單后，將文本添加到圖像上并使用 CSS 設置樣式。我已經嘗試向元素添加一個類并向其添加 css，但這不起作用。這是我的代碼：JSlet 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= ''; })CSSdiv { 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>

查看完整描述

1 回答

汪汪一只貓

TA貢獻1898條經驗獲得超8個贊

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

反對回復 2023-03-18

1 回答
0 關注
171 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

1 回答

添加回答