javascript - 在 JQuery Id 选择器的 .css() 方法中指定输入类型

Question

所以我有一个元素需要位于锚定工具栏下方。将它放在所述工具栏下方所需的顶部填充量根据视口(viewport)的宽度而变化。所以我开发了一个公式来确定从 2560px 到 320px 的任何时间点所需的 padding-top 百分比，这是我们的软件可以满足的最大和最小视口(viewport)宽度，但我正在努力将其实际放入 css风格。

这就是我现在正在使用的东西。

getTopPadding = (): void => {
        var x: number = $(window).width(),
            paddingPercent: number = ((0.007589 * (2560 - x)));
        if (paddingPercent < 5) {
            paddingPercent += 5;
        }

        $('#appendHere').css('padding-top', paddingPercent);
    };

所以我得到了这个公式，它采用我当前的宽度并抽出 padding-top 应该是什么。因此，例如，在 320px 的宽度上，填充需要是，

padding-top: 17%;

paddingPercent 会很好地计算数字 17，但是如果我只将 paddingPercent 作为 .css() 方法的值传入，它会像这样出现

padding-top: 17px;

所以我想知道的是，有没有办法指定我传递的值应该是 px、em、vw 还是 %？我试过了

$('#appendHere').css('padding-top', (paddingPercent + '%'));

考虑也许获取数字并在末尾添加一个字符串会添加我需要的 % 符号并将值字符串化，因为您可以将一个字符串传递给 .css() 方法。但仔细想想，我意识到它接受字符串的原因更多是为了指定颜色等，而不是为了我正在做的事情。我想过类型转换和做

Number((paddingPercent + '%'));

但这会返回 NaN，所以我不确定从这里去哪里。希望有人能提供一些见解。

Answer 1

我检查了控制台为 window.width 值提供的内容，它看起来只是数字，但是当包含在 .css() 中时，如果没有指定其他内容，它会添加 px 值。

在我看来解决它的方法是做

paddingPercent = paddingPercent + '%';

就在运行 .css() 之前，应该这样做。如果我误解了你的问题，请告诉我。我在一个简单的文件中尝试了这个，它成功了。