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

但是，您试图在DOM准备好之前找到document中运行的html元素。因此，你需要在DOM准备就绪后绑定你find函数，jquery脚本应该在document.ready函数中绑定，并尝试从jQuery更改css属性，如下所示：

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

Answer 2

最好在文档加载完成后执行这些CSS更改。

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

您还可以减少上面的代码，只需查询类中的对象。由于您的父对象是文档，因此您可以直接在CSS类上使用JQuery选择器

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

更改特定页面中元素的css

2 个答案: