如何通过转换使div增长到javascript中的段落？

我正在尝试使用一个div进行转换，该div应该增长并与文本重叠。 这是我的密码

const-box=document.querySelector（“#box”）；
const mybutt=document.querySelector（“mybutt”）；
mybutt.addEventListener（“单击”，转换函数）；
函数转换函数（）{
如果（box.style.height！=“100px”）{
box.style.height=“100px”；
box.style.transition=“2s”；
}
否则{
box.style.height=“50px”；
box.style.transition=“2s”；
}
}

#框{
背景：红色；
高度：50px；
宽度：50px；
}
#帕拉{
职位：固定；
}

帮助

单击

首先，您将

#para

的“位置”拼写错误。将其更改为：

#para {
  position: absolute;
  top: 10%;
}

---

这将使段落保持在一个位置；它不会移动。

如果使用

位置：固定

，您应该手动设置

top

属性

要使

div

覆盖一些文本，请使用

z-index

const-box=document.querySelector（“#box”）；
const mybutt=document.querySelector（“mybutt”）；
mybutt.addEventListener（“单击”，转换函数）；
函数转换函数（）{
如果（box.style.height！=“100px”）{
box.style.height=“100px”；
box.style.transition=“2s”；
}否则{
box.style.height=“50px”；
box.style.transition=“2s”；
}
}

#我的屁股{
位置：固定；
顶部：120px；
}
#盒子{
背景：红色；
位置：固定；
高度：50px；
宽度：50px；
z指数：2；
}
#帕拉{
位置：固定；
z指数：1；
顶部：60px；
}

帮助

单击

修复将起作用，但如果希望将其锚定到其父窗口而不是窗口本身，则可能需要使用“绝对”

此外，“位置”拼写错误；不确定它是否在测试代码中

必须设置“top”属性，以便元素知道在何处定位自身，“position”属性是定位到的对象

HTML

帮助

点击

CSS

#盒子{
背景：红色；
高度：50px；
宽度：50px；
}
#帕拉{
位置：绝对位置；
排名前70名；
}

*你也可能想把“para”移到外面“parentdiv”，但这取决于你最终要做什么，它在里面也起作用

添加：

要在75px上包含警报，您必须使用一个提供更精确控制的函数（至少据我所知）。这是一个解决方案：

 <script>
   const box = document.querySelector("#box");
   const mybutt = document.querySelector("#mybutt");

   mybutt.addEventListener("click", transitionfunction);



  var intHeight = $("#box").css("height").split("p")[0];

  function transitionfunction() {
   if(intHeight < 100) {
        intHeight++;
        $("#box").css("height", intHeight + "px");
        if (intHeight===76)
            alert("75px!")
        requestAnimationFrame(transitionfunction);
     }
     intHeight = $("#box").css("height").split("p")[0];
     mybutt.addEventListener("click", revtransitionfunction);
     mybutt.removeEventListener("click", transitionfunction);

  }

  function revtransitionfunction() {
    if(intHeight >= 50) {
        intHeight--;
        $("#box").css("height", intHeight + "px");
        if (intHeight===74)
            alert("75px!")
        requestAnimationFrame(revtransitionfunction);
    }
    intHeight = $("#box").css("height").split("p")[0];
    mybutt.addEventListener("click", transitionfunction);
    mybutt.removeEventListener("click", revtransitionfunction);


  }

const-box=document.querySelector（“#box”）；
const mybutt=document.querySelector（“mybutt”）；
mybutt.addEventListener（“单击”，转换函数）；
var intHeight=$（“#框”）.css（“高度”）.split（“p”）[0]；
函数转换函数（）{
如果（八度<100）{
intHeight++；
$（“#框”）.css（“高度”，八度+px”）；
如果（八分之一===76）
警报（“75px！”）
requestAnimationFrame（transitionfunction）；
}
八度=$（“#框”）.css（“高度”）.split（“p”）[0]；
mybutt.addEventListener（“单击”，revtransitionfunction）；
mybutt.removeEventListener（“单击”，转换函数）；
}
函数revtransitionfunction（）{
如果（八分之一>=50）{
在晚上--；
$（“#框”）.css（“高度”，八度+px”）；
如果（八分之一===74）
警报（“75px！”）
requestAnimationFrame（revtransitionfunction）；
}
八度=$（“#框”）.css（“高度”）.split（“p”）[0]；
mybutt.addEventListener（“单击”，转换函数）；
mybutt.removeEventListener（“单击”，revtransitionfunction）；
}

谢谢，我需要运行一个函数，比如说

函数警报

，当框高为75像素时，它会发出“hello”警报。我怎样才能最好地完成这个任务？@craftdeer我想你可以使用它，它在动画的每一步上都执行一个

步骤

回调。您可以检查其内部的高度并警告该消息。或者，如果您想在过渡中间提醒消息，可以简单地使用<代码> SETTIMEOUT函数。如果转换需要2秒钟，请调用

setTimeout（（）=>alert（“Hi！”），1000）

谢谢，我不想使用jQuery，只能使用普通javascript。我不能使用setTimeout，因为我想从api获取一些数据，而不是仅仅发出警报，而且我可能无法在1秒内获取数据。无论如何，当您获取数据时，转换可能会完成谢谢，我需要运行一个函数，比如

函数警报

，当框高为75像素时，它会发出警报“hello”。如何才能最好地完成此任务？编辑解决方案。我使用了jQuery的css属性，因为它使解决方案更简单。split（不是jQuery），它只允许您获得一个可以进行数学操作的数值。

<style>
  #box {
    background: red;
    height: 50px;
    width: 50px;
  }

  #para {
    position: absolute;
    top:70;
  }
 </style>

 <script>
   const box = document.querySelector("#box");
   const mybutt = document.querySelector("#mybutt");

   mybutt.addEventListener("click", transitionfunction);



  var intHeight = $("#box").css("height").split("p")[0];

  function transitionfunction() {
   if(intHeight < 100) {
        intHeight++;
        $("#box").css("height", intHeight + "px");
        if (intHeight===76)
            alert("75px!")
        requestAnimationFrame(transitionfunction);
     }
     intHeight = $("#box").css("height").split("p")[0];
     mybutt.addEventListener("click", revtransitionfunction);
     mybutt.removeEventListener("click", transitionfunction);

  }

  function revtransitionfunction() {
    if(intHeight >= 50) {
        intHeight--;
        $("#box").css("height", intHeight + "px");
        if (intHeight===74)
            alert("75px!")
        requestAnimationFrame(revtransitionfunction);
    }
    intHeight = $("#box").css("height").split("p")[0];
    mybutt.addEventListener("click", transitionfunction);
    mybutt.removeEventListener("click", revtransitionfunction);


  }