使用 Javascript 动态调整 HTML 元素的位置答案

【问题标题】：Dynamically adjust positioning of an HTML element using Javascript使用 Javascript 动态调整 HTML 元素的位置
【发布时间】：2014-02-04 04:58:28
【问题描述】：

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

我目前遇到的问题是当尺寸增加（或减少）时，元素会在页面上（分别）向下和向上移动。

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

这是我的 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

【问题讨论】：

我运气不错，绝对定位，将行高设置为 0；并调整顶部，左侧以抵抗运动。不发布，因为它不精确或不漂亮，而是一个黑客。希望有人能提出更好的解决方案。我已经尝试了这些建议，似乎 webkit 中的行高仍然增加了。

标签： javascript html css padding

【解决方案1】：

我认为问题在于 line-height 会随着 font-size 自动变化，与

相关联的边距也是如此

标签。

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

例如

<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>

希望对你有帮助。

【讨论】：

我已经尝试过这个解决方案，但问题仍然存在。 'if' 语句中应用的样式是否会覆盖此默认值？
更新了上面的答案，它并不完美，但应该让你更接近一点。
谢谢！这立即奏效了！我忘了我可以用 &nbsp！

【解决方案2】：

您需要将点容器的行高设置为等于其高度。

【讨论】：