javascript - 按下输入文本字段时增加 div 元素的 paddingTop，否则减少

Question

我的HTML 元素中有一个input文本字段。div我想增加单击输入文本字段时padding-top的div，否则减少它。

• 我的HTML：

        <div id="quarter_tenure">
            <p id="date"><b>Occupancy Date</b> :<br>
                   <input type="text" id="datepicker" name="datefilter" value="" onclick="reset_size()"/></p>
        </div>
  

• 我的Javascript：

  function reset_size(){
      let x = document.getElementById("quarter_tenure");
  
      if(document.getElementById("datepicker") === document.activeElement){
          x.style.paddingTop="30em";
      } 
      else{
          x.style.paddingTop="15em";
      }
  }
  

但是当我执行代码时，无论我点击文本字段，padding-top它都不会改变。input这里有什么问题？我如何解决它？

---

编辑：正如@Timothy Alexis Vass 所建议的，我已将他的代码添加到我的css：

#quarter_tenure{
    display: flex;
    flex-direction: row;
    border:dotted;
    margin-top: 8em ;
    padding-top: 15em;
    border-width: 1px;
    border-radius: 5px;
    background-color: rgb(228, 255, 254);
    transition: 2s;
}

#quarter_tenure:focus-within {
    padding-top: 30em;
}

但它仍然无法正常工作。

标签： javascripthtml

Answer 1

您只能使用 css 执行此操作。

#quarter_tenure {
  padding-top: 1em;
  transition: 1s;
}

#quarter_tenure:focus-within {
  padding-top: 5em;
}

<div id="quarter_tenure">
  <p id="date">
    <b>Occupancy Date</b> :<br>
    <input type="text" id="datepicker" name="datefilter" value="" />
  </p>
</div>