使用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");
});