如果jQuery更改它，则不执行CSS margin-left答案

【问题标题】：Css margin-left not executed if jQuery change it如果jQuery更改它，则不执行CSS margin-left
【发布时间】：2017-05-01 03:34:27
【问题描述】：

我的 CSS 的奇怪行为是：

@media (min-width: 800px) {
    #DivWraper {
        margin-left: 250px;
        transition: 0.5s;
    }
}

在页面的某处，我有这个 JS 代码：

function sidebarClose() {
    $("#DivWraper").attr("style", "margin-left: 0px");
}

function sidebarOpen() {
    if (this.window.innerWidth > 800) {
        $("#DivWraper").attr("style", "margin-left: 250px");
    }
}

如果我们调用sidebarClose() 和sidebarOpen()，那么CSS 行为就不再起作用了。

如果我将这两行 $("#DivWraper").attr(...) 匹配，那么 CSS 将继续工作。为什么$("#DivWraper").attr(...) 会阻止 CSS 工作？

【问题讨论】：

$("#DivWraper").css('marginLeft', '250px'); 有什么问题？
这似乎是预期的行为。 JS/jQuery 总是覆盖 css。没有什么奇怪的。
哦，我以为jQuery部分不起作用。忽略我写的
你有默认的#DivWraper css（在@media 选择器之外）吗？您期望该代码产生什么效果？

标签： jquery css html margin

【解决方案1】：

问题在于您使用this.window.innerWidth。 window 是全局的，所以你应该删除this.：

function sidebarOpen() {
    if (window.innerWidth > 800) {
        $("#DivWraper").attr("style", "margin-left:250px");
    }
}

Working example

另请注意，您使用attr() 设置内联样式并不理想。您可以使用css()，但即使这样也不符合最佳实践。更好的解决方案是在元素上设置一个类。这样您甚至不需要检查窗口的宽度，因为媒体查询会为您处理好：

$('#open').click(sidebarOpen);
$('#close').click(sidebarClose);

function sidebarOpen() {
  $("#DivWraper").addClass("open");
}

function sidebarClose() {
  $("#DivWraper").removeClass("open");
}

#DivWraper {
  width: 200px;
  height: 200px;
  border: 1px solid #C00;
}
@media (min-width: 200px) { /* required to make this snippet work, use 800px in production */
  #DivWraper {
    transition: 0.5s;
  }
  #DivWraper.open {
    margin-left: 250px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="DivWraper" class="open"></div>

<button id="open">Open</button>
<button id="close">Close</button>

请注意，我将 snipper 的媒体查询中的宽度修改为 200px，以便它可以在那里工作。

【讨论】：

jsfiddle.net/jqymu5vy 如果您将框架移动到小于 600px，margin-left 框将变为 0px。 cjoint.com/doc/16_12/FLpopdjCwKc_DivWrapperMarginLeft.jpg。但是如果你在减小帧大小之前使用“打开”和“关闭”按钮，那么左边距框不会变为 0px。
没错——因为您已经设置了元素的attr()，而不管窗口宽度如何。如果您使用我在 sn-p 中概述的改进版逻辑，您将不会遇到该问题

【解决方案2】：

认为这是因为您试图使用元素的 style 属性覆盖由 id "#DivWrapper" 定义的 CSS 样式。认为最好在样式属性中仅定义“margin-left”，或者使用 css 类并替换方法中的类。

CSS：

.sidebarOpen
{
        margin-left: 250px;
        transition: 0.5s;
}
.sidebarClose
{
        margin-left: 0px;
        transition: 0.5s;
}

JS：

function sidebarClose() {
    $("#DivWraper").attr("class", "sidebarClose");
}


function sidebarOpen() {
    if(this.window.innerWidth > 800) {
        $("#DivWraper").attr("class", "sidebarOpen");
    }
}

【讨论】：

【解决方案3】：

jQuery 将内联样式应用于元素，因此它们比 CSS 代码更具特异性。如果您在 CSS 中的边距之后应用 !important（不推荐），它将覆盖 jQuery 样式。

使用定义左边距的类.open 并通过 jQuery 添加它。

function sidebarClose() {
    $("#DivWraper").addClass("open");
}


function sidebarOpen() {
    if(this.window.innerWidth > 800) {
      $("#DivWraper").removeClass("open");
    }
}

【讨论】：