为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕哥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>

  <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>


查看完整回答
反对 回复 2023-03-18
  • 1 回答
  • 0 关注
  • 91 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信