Add style with JavaScript

Question

I am trying to set CSS styles using Javascript.

I have written this code:

But the code is not working.

Note : I have a good French, but my English isn't good. Pardon me. I hope you understand.

Useless Code · Accepted Answer

As gavgrif hinted at in the comments, it would be better to define static CSS styles and then manipulate the class names instead of trying to set everything with JS. Only setting things at run-time when they need to be dynamic and changeable. This will help with the separation of concerns and help make your code more maintainable.

In this case everything you are defining is static, the only real change you are making is hiding or showing the elements via changing display to none or block. You can easily achieve a similar effect by instead just defining them as blocks and creating a class that hides an element via visibility: hidden. Then you can hide and show them by adding or removing that new class.

This is how I would rewrite it:

function karanlikyap2() {

  var ogedim = document.getElementById('dim');
  var ogewrapper = document.getElementById('dialog_wrapper');

  // you only need to remove the hidden class from the items at the top
  // level of the DOM, the wrapper and dim
  ogedim.classList.remove('hidden');
  ogewrapper.classList.remove('hidden');

}

function hide() {
  var ogedim = document.getElementById('dim');
  var ogewrapper = document.getElementById('dialog_wrapper');

  // add the hidden class back on to hide them again.
  ogedim.classList.add('hidden');
  ogewrapper.classList.add('hidden');
}

// hide the dialog when something is clicked
document.getElementById('dialog_wrapper').addEventListener('click', hide, false);
document.getElementById('dim').addEventListener('click', hide, false);

#dim {
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1 !important;
  background-color: black;
  filter: alpha(opacity=75);
  -khtml-opacity: 0.75;
  -moz-opacity: 0.75;
  opacity: 0.75;
  display: block;
}

#dialog_wrapper {
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 5;
  display: block;
}

#dialog {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
  border: 1px solid #ccc;
  color: #333;
  display: block;
}

.hidden {
  visibility: hidden;
}

(I've used a different image to get around mixed-content issues because StackOverflow is served over https and your image is on http.)

Further reading:

Add style with JavaScript

Answers (2)

Related Questions