Javascript ile style sorunu

<div class="dim" id="dim" title="Event">
</div>  

<div class="dialog_wrapper" id="dialog_wrapper">
<div class="dialog" id="dialog"><img  id="buyukresim" src="http://ginger-mum.com/wp-content/uploads/2015/10/3633-1269758855-0da5042c33400a811a5d766be4579cb8.jpg" height="250"></div>
</div>

<script>

document.getElementById('buyukresim').style.display = "none";
document.getElementById('dim').style.display = "none";
document.getElementById('dialog_wrapper').style.display = "none";
document.getElementById('dialog').style.display = "none";

function karanlikyap2() {

  var ogedim = document.getElementById('dim');
  var ogewrapper = document.getElementById('dialog_wrapper');
  var ogedialog = document.getElementById('dialog');
  var ogeresim = document.getElementById('buyukresim');

  ogedim.style.height = "100%";
  ogedim.style.width = "100%";
  ogedim.style.position = "fixed";
  ogedim.style.left = "0";
  ogedim.style.top = "0";
  ogedim.style.z-index = "1 !important";
  ogedim.style.background-color = "black";
  ogedim.style.filter = "alpha(opacity=75)";
  ogedim.style.-khtml-opacity = "0.75";
  ogedim.style.-moz-opacity = "0.75";
  ogedim.style.opacity = "0.75";
  ogedim.style.display = "block";

  ogewrapper.style.width = "100%";
  ogewrapper.style.top = "0";
  ogewrapper.style.left = "0";
  ogewrapper.style.position = "absolute";
  ogewrapper.style.z-index = "5";
  ogewrapper.style.display = "block";

  ogedialog.style.width = "400";
  ogedialog.style.height = "400";
  ogedialog.style.margin = "0 auto";
  ogedialog.style.padding = "40";
  ogedialog.style.background-color = "#fff";
  ogedialog.style.border = "1px solid #ccc";
  ogedialog.style.color = "#333";
  ogedialog.style.display = "block";

  ogeresim.style.display = "block";

}

</script> 

<button onclick="karanlikyap2()">Karanlık 2</button>