特定のページ内の要素のCSSを変更する

Question

ページ内の特定の要素でCSSを変更しようとしています（特定のページで異なる必要があるため）。これを無駄にしようとしています。

<script> 
$(document).find('#nav-icon span').css({ 
    'background-color': '#333' 
}); 

$(document).find('.screen-nav li a').css({ 
    'color': '#fff' 
}); 

$(document).find('.screen-nav li a:after').css({ 
    'background-color': '#fff' 
}); 
</script> 

Answer 1

ドキュメントの読み込みが完了した後で、これらのCSS変更を実行する方が良いことがあります。

$(document).ready(function(){ 
    $(document).find('#nav-icon span').css({ 
    'background-color': '#333' 
    }); 
}); 

上記のコードを減らして、単にクラスからオブジェクトを照会することもできます。あなたの親オブジェクトが文書であるので、あなたはDOMの準備が整う前に実行されますdocumentからhtml要素を見つけようとしているしかし、あなたは直接

$(document).ready(function(){ 
    $('#nav-icon span').css({ 
    'background-color': '#333' 
    }); 
}); 

Answer 2

CSSクラスにjQueryのセレクタを使用することができます。 DOMの準備ができているとjqueryのスクリプトがdocument.ready関数内であることと、このようにjQueryのからのCSSプロパティを変更しようとする必要があります後にそのため、あなたはあなたのfind機能をバインドする必要があります。

HTML

<nav class="screen-nav"> 
<ul> 
    <li><a href="#">AA</a></li> 
    <li><a href="#">BB</a></li> 
    <li><a href="#">CC</a></li> 
    <li><a href="#">DD</a></li> 
</ul> 
</nav> 

jQueryの

$(document).ready(function(){ 
    $('.screen-nav li a').css({ 
    "background-color": "yellow", 
    "font-size": "200%", 
    "color":"#000" 
    }); 
}); 

作業デモhere