使用javascript更改CSS工作内联，但不是从标题

我有一个div区域，我想在页面加载后更改CSS。我的HTML看起来像以下使用javascript更改CSS工作内联，但不是从标题

<div class='myArea'> 

</div> 
<script type="text/javascript"> 
      $('.myArea').css('background-color',"red"); 
</script>

它的工作原理。但是，如果我将它移动到外部js文件并从头文件引用js文件，这不起作用。以下是在外部文件中的js代码 -

function init(){ 
     $('.myArea').css('background-color',"blue"); 

    } 
window.addEventListener('load', init, false);

什么可能是这背后

2014-10-01 Shafi

在页面加载完成之前，您正在执行JavaScript吗？如果你使用jQuery，它看起来像，为什么你使用'window.addEventListener（'load'，init，false）;'？ – j08691 2014-10-01 16:06:48

请记住，对外部js文件的引用必须放在* JQuery *引用之后，因为它使用它... – LcSalazar 2014-10-01 16:08:09

那是什么'$（document）.ready（function（）{..}）'是为 – 2014-10-01 16:08:28

你只需要将代码放入jQuery文档准备功能中，$（）是该函数的快捷方式：

$(function(){ 
    $('.myArea').css('background-color',"red"); 
});

2014-10-01 16:08:05 Ragnar

您的解决方案有效。你能解释一下，为什么添加事件监听器不工作，你的解决方案工作？ – Shafi 2014-10-01 21:44:13

这与使用'ready（）'相同，您不能将事件绑定到未渲染的元素。 'ready（）'是文档加载时触发的事件。 [更多这里]（http://api.jquery.com/ready/） – 2014-10-01 21:49:35

是@Brian说，'$（）'是'$（document）.ready（）'的快捷方式' – Ragnar 2014-10-02 13:27:52

的原因，如果你已经在使用jQuery试试这个？：

window.onload = function() { 
    $('.myArea').css('background-color',"red"); 
}

或者，，你可以使用自己的文件准备好（）：http://api.jquery.com/ready/

$(document).ready(function() { 
    $('.myArea').css('background-color',"red"); 
});

2014-10-01 16:07:33 Dave

回答