javascript - 通过 jquery 或 javascript 更改后检索 css 属性的第一个值

Question

假设有一个 div 元素，并且宽度为 760px。当前 margin-top 作为 css 属性值将为 60px。

CSS:

@media only screen and (min-width: 360px) {
    div.me {
        margin-top: 30px;
    }
}
@media only screen and (min-width: 760px) {
    div.me {
        margin-top: 60px;
    }
}

然后我通过 jquery 更改 margin-top 来执行更多操作。例如80px。

Jquery

$("div.me").css("margin-top", "80px");

<小时/>

我正在寻找以下解决方案:当用户调整窗口大小时，将元素margin-top重置为第一个documnet Ready值取决于它的媒体查询。

假设用户将大小调整为 400px 宽度。因此该元素应重置为 margin-top: 30px。

我想为所有元素设置自定义属性以保存其中的第一个值。

$(document).ready(function () { 
    var m = $("div.me").css("margin-top");
    $("div.me").attr("first-margin-top", m);
});

$(window).resize(function () {
    // some stuff to retrieve first value, not important...
});

但是页面上有很多这样的元素，每个元素都有很多媒体查询值。这里我只讨论了一个元素。

是否有更好的方法来检索和重置元素？有什么想法吗？

Answer 1

您内联设置 CSS 值，因此它胜过您的媒体查询。要么使用 jquery 执行此操作，要么将 !important 标签添加到您的 css 中:

@media only screen and (min-width: 760px) {
    div.me {
        margin-top: 60px !important;
    }
}

$(window).resize(function () {
    if($(window).width < 760){
      $("div.me").css("margin-top", "60px");
    }
});