Javascript 如何基于边距样式创建If-Else条件

我很难让这个动画在点击时产生效果，其中有一个If-Else条件。因此，joinbox从7%的“利润率顶部”开始，我希望它在点击后从纸张4移动到-19%的“利润率顶部”；除非已经是7%。如果没有，我希望在单击后将其移回7%。另外，我正在使用velocity js，它只是一个更平滑的.animate函数

$("#paper4").click(function() {

    if ($("#joinbox").css("margin-top")=="7%") 
        {$("#joinbox").velocity({"margin-top": "-19%"}, 200, "easeInOutQuad");}

         else {$("#joinbox").velocity({"margin-top": "7%"}, 200, "easeInOutQuad");}
});

这是joinbox的原始风格

---

根据我的记忆，

.css（“边距顶部”）

返回

px

中类似

7px

的内容，而不是

7%

的百分比，因此可以尝试将百分比转换为px。您可以使用类似于

$（）.offset

的内容进行转换

---

试着做

console.log（$（“#joinbox”）.css（“页边空白”）

我想你不会得到百分比

因为您将只在

px

中检索值。您可以使用父宽度并手动计算百分比

大概是这样的：

$（“#paper4”）。单击（函数（）{
var elementMargin=parseInt（$（'#joinbox'）.css（'margin-top'）），
parentWidth=Math.round（$（'#joinbox'）.parent（）.width（）*0.07）；
if（elementMargin==parentWidth）{
console.log（'margin-top:7%”）
}否则{
console.log（'margin-top:-19%'）
}
});
#joinbox{
利润率最高：7%；
左缘：31.5%；
宽度：300px；
高度：100px；
背景颜色：粉红色；
}

Hay
您是否尝试过媒体查询？这是真的。您将返回一个“px”值。//=>37.5781px
#joinbox {
    margin-top: 7%;
    margin-left: 31.5%;
    width: 35%;
    position: fixed;
    box-shadow: 0 5px 10px #332E2C;
    background-color: white;
    padding: 1%;
}