CSS의 jQuery를 그것을 변경하는 경우 실행되지 이익률은 왼쪽 내 CSS의

Question

이상한 행동 : 페이지

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

참고 : 미디어 쿼리가 당신을 위해 알아서하므로이 방법은 당신도 윈도우의 폭을 점검 할 필요가 없습니다 sniper를 200px으로 바꿉니다.

Answer 2

id의 "#DivWrapper"로 정의 된 CSS 스타일을 요소의 스타일 속성을 사용하여 재정의하려는 것이 원인이라고 생각하십시오. style 속성에 "margin-left"를 정의하거나 대신 css 클래스를 사용하고 메소드에서 클래스를 바꿔주는 것이 더 좋을 것이라고 생각하십시오.

CSS :

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

JS : 그들은 CSS 코드보다 더 특이도를 얻을 수 있도록

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


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

Answer 3

jQuery를이 요소에 인라인 스타일을 적용합니다. CSS의 여백 뒤에 !important (권장하지 않음)을 적용하면 jQuery 스타일보다 우선 적용됩니다.

왼쪽 여백을 정의하고 jQuery를 통해 추가하는 클래스 .open을 사용하십시오.

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


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