Question

我的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工作？

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

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

Answer 2

认为这是因为你试图使用元素的style属性覆盖由id“#DivWrapper”定义的CSS样式。认为最好只在style属性中定义“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");
    }
}

Answer 3

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

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

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


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

如果jQuery改变它，则不会执行Css margin-left

3 个答案: