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の動作はもう機能しません。

私がこれらの2行にコメントすると、$("#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

idの "#DivWrapper"で定義されているCSSスタイルを、その要素のstyle属性を使って上書きしようとしているからだと考えてください。 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スタイルが上書きされます。

余裕を定義したクラス.openを使用し、jQuery経由で追加します。

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


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