img要素の読み込み完了を検知し、非表示要素を表示するため、onload=""を使用してCSSの生成を行いたいのですが、いまいち方法が理解できておりません。

<style>
  セレクタ {display: none;}
</style>

上記のCSSを、onloadを使用して

<style>
  セレクタ {display: block;}
</style>

に上書きしたいと思っています。

onloadの処理でdisplay:blockを生成する事は可能でしょうか？
知識のある方お手数をお掛けいたしますが、ご教授いただける幸いでございます。

以下は現在のコードでございます。

.main_off {
  display: none;
}
.main_on {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
  function main_on(){
    // イメージが読み込まれた！
    document.getElementsByTagName('div').className = "main_on";
  }
</script>

<div class='onload-on-img-onload main_off' onload="main_on();">
  <img src="http://i.imgur.com/PWSOy.jpg" />
</div>

<div class='onload-on-img-onload main_off' onload="main_on();">
  <img src="http://i.imgur.com/PWSOy.jpg" />
</div>

<script>
  // ## ユーティリティ ##
  // div をスキャンして画像読み込み後に onload を呼び出すコード
  var divs = $(".onload-on-img-onload");
  divs.each(function (idx, div) {
    var imgs = $(div).find("img");
    var count = imgs.length;
  if (count==0 && div.onload)
    div.onload.call(div, count);
  var loaded = 0;
  imgs.one("load", function (e) {
    loaded++;
    if (loaded === count && div.onload)
        div.onload.call(div, count);
    }).each(function () {
      if (this.complete) $(this).load();
    });
  });
</script>

<body>

上記コードは(div内はかなりフェイクいれています)色々なサンプルを混ぜ合わして作っている為、私自身理解しきれていません。
ですので、まったく手法が変わっても構いませんので、どうぞよろしくお願いいたします。