如何在按钮点击时添加累积保证金？

Posted 2023-05-08

【中文标题】如何在按钮点击时添加累积保证金？

【英文标题】：How can I add accumulative Margin on button click?

【发布时间】：2022-01-17 03:52:33

【问题描述】：

我正在尝试添加一个文本滑块，其中基本上是一个很长的文本框延伸到视图之外，并且当按下按钮时添加边距以便可以阅读更多文本。我不知道如何制作一个可以增加边距而不每次都成倍增加的按钮。

<div class='long'>
  <div class='container'>
          <button type="button" onclick="display()">Add left margin</button>
  <p id="myID">This is demo text.</p>
  <script>
     function display() 
        var e = document.getElementById("myID").style.marginLeft += 1  document.getElementById("myID").style.marginLeft; 
     
  </script>

点击几下后，这开始疯狂增加保证金。我相信这是因为 1 不是 1px，而是其他一些使它疯狂地加起来的单位。所以我想要一个按钮，每次点击增加 1px 的边距，所以它可以平滑地增加边距，而不是一个大的不可用的跳跃。

我的假设是您需要获取边距值，将其存储，然后将其添加到末尾有 'px' 的字符串中，然后用它更新边距？

【参考方案1】：

你的想法是正确的。将margin值存储在函数外的一个变量中，每次加一。

style.marginLeft 返回 1px 而不是 1，这意味着您不能递增到它。

var margin = 1; 
function display() 
    document.getElementById("myID").style.marginLeft = ++margin + "px";

<div class='long'>
  <div class='container'>
          <button type="button" onclick="display()">Add left margin</button>
  <p id="myID">This is demo text.</p>
  </div>
  </div>

【参考方案2】：

parseInt 和 parseFloat 函数将为 marginLeft 返回数值（即没有导致问题的尾随 'px'）。

function display() 
    let el = document.getElementById("myID");
    el.style.marginLeft = `$parseInt(el.style.marginLeft)+1px`;  
 

【参考方案3】：

问题是当您使用+ 运算符时会发生字符串连接 您必须将从element.style.marginLeft 返回的值转换为数字。您可以调用Number() 函数或使用+ 运算符立即附加在我的解决方案中。另一个问题可能是返回的值类似于1px，例如，要增加它你必须解析它，我使用了split 函数

function display() 
           let currentMarginValue = +document.getElementById("myID").style.marginLeft.split('px')[0];
           console.log(currentMarginValue)
          var e = document.getElementById("myID").style.marginLeft = currentMarginValue + 1 + "px" ;
       

【参考方案4】：

您可能需要一个计数器，每次点击都会增加。请参考以下代码

  <script>
  let count = 0;
     function display() 
     document.getElementById("myID").style.marginLeft = ++count+"px";
     
  </script>