使用javascript更改CSS的方式是内联的，而不是标题中的

Question

我有一个div区域，我想在页面加载后更改CSS。 我的HTML如下所示

<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);

这可能是什么原因

Answer 1

您只需要将代码放入jQuery文档ready函数中，$（）是该函数的快捷方式：

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

Answer 2

试试这个吗？：

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

或者，如果您已经在使用jQuery，则可以使用其文档ready（）： http : //api.jquery.com/ready/

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