divの高さに応じて.cssファイルを追加するにはどうすればよいですか？

Question

ナビゲーションバーの高さが54pxを超えて増加したときにCSSファイルを追加しようとしました（テキストが2行目になると）となり、高さが54pxを下回ると削除されます。私は、コードのビットをしようとしてきたが、何も作品には思わない：

私が試み

var $navscript = '<link rel="stylesheet" href="/css/edt/nav-bar.css" type="text/css"/>'; 

if ($("#navbar").height() > 54) { 
    alert("Activate Code Here"); 
    $("body").append('navscript'); 
} 

私が間違っているつもりどこに任意のアイデアを失敗しましたか？これにより

Answer 1

端にこれを固定してしまった、私が使用されるコードは、ウィンドウのサイズ変更時にコードのセグメントとDIVの高さまたは幅に応じていくつかの他の文リロードの混合であった：

var $navscript = '<link rel="stylesheet" href="/css/edt/nav-bar.css" type="text/css" data-dynamic />'; 

var changeSize = 0; 
$(window).resize(function() { 
    if ($(".links").height() > 16) { 
     if ($('link[data-dynamic]').length === 0) { 
      changeSize = window.outerWidth; 
      $("head").append($navscript); 
     } 
    } 
    else { 
    } 

if (changeSize < window.outerWidth) { 
    $('link[data-dynamic]').remove() 
} 

は}） ;

Answer 2

$("body").append('navscript'); 

あなたbodyに文字列navscriptを追加している、多分あなたは頭に変数$navscriptを追加してみてください。

var $navscript = '<link rel="stylesheet" href="/css/edt/nav-bar.css" 
type="text/css"/>'; 

if ($("#navbar").height() > 54) { 
    alert("Activate Code Here"); 
    $("head").append($navscript); 
} 

コンテンツを動的に追加することは、一般的に悪い習慣とみなされますが、たぶんあなたのCSSのすべてを1つのファイルに移動し、これによって変更されるべきオブジェクトにクラスを追加してください。

Answer 3

私は、これが動作する必要がありますね：

if ($("#navbar").height() > 54) { 
    alert("Activate Code Here"); 
    $("body").append($navscript); 
} 

しかし、あなたは、高さに依存して変化するのナビゲーションバーのスタイルをしたいように思えます。この場合、イベントリスナーを追加して（高さを増加させるイベントの場合）、そこにコードを配置する必要があります。私の意見は、あなたのcssファイルをDOMに入れて、いくつかのCSSクラスで動作させる方が良いと思っています。たとえば：

$(window).resize(function(){ 
    var $navbar = $("#navbar"); 
    if ($navbar.height() > 54) { 
     $navbar.toggleClass('class'); 
    } 
}); 

Answer 4

それはかなりのリンクタグの多くのDOMを膨満されるように私は本当に（ときデバイスの寸法が変化しますが、これをやる場合は特に）、これを行うことはお勧めしませんし、それが全体的に悪いです練習。

代わりにCSS media queriesを使用してデバイスの幅と高さを検出し、それに応じてCSSプロパティを適用することをお勧めします。

Answer 5

あなたは<link>タグにメディアクエリルールを置くことができる、唯一の特定の画面サイズで二次CSSファイルを添付するには：

<link rel="stylesheet" media="screen and (max-width: 500px)" href="smallscreens.css" /> 

それはしかし、これを行うにはほとんど必要です。ほとんどの場合、それはあなたが単一のCSSファイル内に必要なものは何でも@media規則含まれるように簡単です：

/* default rules here */ 
.foo {font-size: 1000px} 

@media screen and (max-width: 500px) { 
    /* rules for small screens go here */ 
    .foo {font-size: 10px} 
} 

あなたは、最大幅、最小幅、または他の多くの条件のいずれかの組み合わせを使用して、サイズのブレークポイントの任意の数を設定することができます同じCSSファイル内に存在します。

https://www.w3.org/TR/css3-mediaqueries/

（これは正確に特定のdivの高さに基づいてCSSを取り外す/取り付けるあなたの要件を満たしていないが、私はあなたのナビゲーションバーの高さの変化が実際に起因すると推測しています画面サイズの変更、そしてあなたはこれを難しい方法で解決しようとするXYの問題に自分自身を掘り下げた。）