我正在嘗試添加一個文本滑塊，其中基本上一個非常長的文本框延伸到視圖之外，并且當按下按鈕時會添加邊距，以便可以讀取更多文本。我不知道如何制作一個可以增加邊距而不每次都呈指數增加的按鈕。
<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' 的字串中，然后用它更新邊距？
uj5u.com熱心網友回復：
你的想法是對的。將邊距值存盤在函式外部的變數中，每次加一。
的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>uj5u.com熱心網友回復：
parseInt 和 parseFloat 函式將回傳 marginLeft 的數值（即沒有導致問題的尾隨“px”）。
function display() {
let el = document.getElementById("myID");
el.style.marginLeft = `${parseInt(el.style.marginLeft) 1}px`;
}
uj5u.com熱心網友回復：
問題是當您使用 運算子時會發生字串連接您必須將回傳的值轉換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" ;
}
uj5u.com熱心網友回復：
您可能需要一個每次點擊都會增加的計數器。請參考以下代碼
<script>
let count = 0;
function display() {
document.getElementById("myID").style.marginLeft = count "px";
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/380681.html
標籤：javascript html 查询 css
上一篇：底部對齊的導航棒滾動到頂部
下一篇：加載新文章內容時重置圖庫計數