javascript - 使用 Javascript 动态调整 HTML 元素的位置

Question

我有一个脚本可以增加和减少句点的大小。最终结果是有一个周期会增加和减少，同时保持静止。

我目前遇到的问题是当尺寸增加(或减小)时，元素将(分别)在页面上下移动。

为了解决这个问题，我尝试在字体大小增加时调整填充。此调整不起作用，元素继续移动。

这是我的 Javascript:

window.dotFluxOut = true;
var i = 1;
var pad = 50;

var dots = window.setInterval(function () {
    var wait = document.getElementById("wait");

    if (window.dotFluxOut) {
        wait.style.fontSize = i + "px";
        wait.style.padding = (pad - i) + "px";
        i++;
    } else {
        wait.style.fontSize = i + "px";
        wait.style.padding = (pad - i) + "px";
        i--;
    }

    if (parseInt(wait.style.fontSize.replace("px", "")) > 180) {
        window.dotFluxOut = false;
    } else if (parseInt(wait.style.fontSize.replace("px", "")) < 3) {
        window.dotFluxOut = true;
    }

}, 5);

这是我的 HTML:

<p id="wait" align="center" style="font-size: 160px">.</p>

编辑:

如果你想看到它运行:JSFiddle

Answer 1

我认为问题在于行高会随字体大小自动变化，与

标签关联的边距也是如此。

如果您最初将行高设置为略大于最大字体大小，这应该有助于解决该问题。

例如

<p id="wait" align="center" style="font-size: 160px; line-height:200px; margin:0">.</p>

第二个问题是句点/句号字符上方和下方的空白随着字体大小的变化而增长，即允许高字符 (bdfhijklt) 和尾字符 (gjpqy)。

我想到的最好的是:

<p align="center" style="margin:0"><span id="wait" style="font-size:160px">.</span><span style="font-size:200px">&nbsp;</span></p>

希望对您有所帮助。