如何获取元素的新值？- Javascript

Question

对不起，我是 JavaScript 的初学者，这个问题肯定已经被问过了，但我没有找到任何答案。我认为这很简单，但我这样做：

<h1 onclick="up()" id="titre">Le texte du titre</h1>

<div id="div">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

<img src="Koala.jpg">

<script type="text/javascript">

    function descend() {

        var cour = document.getElementById("div").style.marginTop;

        var cour = (cour+50);

        document.getElementById("div").style.marginTop = cour;

    }

    function up() {

        setInterval(descend, 2000);

    }

</script>

因此，在此脚本中，当我单击 H1 时，我会启动以 2 秒间隔up()启动该功能的功能descend()。问题是当我在第二回合获得 marginTop 值时，它不会增加。（我知道我还有另一个小问题。我需要用 px 表示新值）我该怎么做？谢谢

Answer 1

marginTop将返回带有px后缀的值。所以你将无法做到(cour + 50)。parseInt会帮助你。var&nbsp;cour&nbsp;=&nbsp;parseInt(document.getElementById("div").style.marginTop,&nbsp;10)marginTop将返回'50px'，parseInt并将其转换为50.

Answer 2

<h1 onclick="up()" id="titre">Le texte du titre</h1><div id="div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor&nbsp; in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><img src="Koala.jpg"><script type="text/javascript">&nbsp; &nbsp;function descend() {&nbsp; &nbsp; &nbsp; &nbsp; var cour = document.getElementById("div").style.marginTop;&nbsp; &nbsp; &nbsp; &nbsp; if (cour === "") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cour = 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; cour = (cour + 50);&nbsp; &nbsp; &nbsp; &nbsp; var newcour= cour + "px";&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("div").style.marginTop = newcour;&nbsp; &nbsp; }&nbsp; &nbsp; function up() {&nbsp; &nbsp; &nbsp; &nbsp; setInterval(descend, 2000);&nbsp; &nbsp; }</script>

Answer 3

这是有效的：https://codepen.io/ayhandoslu/pen/vYYPzYR?editors=1001<script type="text/javascript">&nbsp; &nbsp; function descend() {&nbsp; &nbsp; &nbsp; &nbsp; var cour = +(document.getElementById("div").style.marginTop || "0px").replace("px", "");&nbsp; &nbsp; &nbsp; &nbsp; var cour = (cour+50);&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("div").style.marginTop = cour + "px";&nbsp; &nbsp; }&nbsp; &nbsp; function up() {&nbsp; &nbsp; &nbsp; &nbsp; setInterval(descend, 2000);&nbsp; &nbsp; }</script>