Add style with JavaScript

Question

I am trying to set CSS styles using Javascript.

I have written this code:

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

But the code is not working.

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

This is a truly bad way of applying styles to elements. That said (and this may not be your only issue) - but when setting styles by JS - you need to remove any hyphens in the style rule and apply it as camelCase - eg: "ogedialog.style.backgroundColor = "#fff";" - But this seems a crazy bad way of altering styles. You are far better to have all these styles set as style rules with a class name and then simply add / remove the class to the element to add / remove the styles on the onclick event. — gavgrif
– gavgrif, Commented Nov 19, 2017 at 9:20
That & the declarations for javascript applied styles do not translate directly to their css counterparts. You'll want to cross-reference those. — admcfajn
– admcfajn, Commented Nov 19, 2017 at 10:19
Another problem is that several of your properties don't have units specified, so they won't work as you expect them to. eg: width = "400", which I'm assuming you meant to be width = "400px". (Same with height, and padding; if the value is 0, then you don't need to specify an unit). — Useless Code
– Useless Code, Commented Nov 19, 2017 at 11:17

Himal Shrestha · Accepted Answer · 2017-11-19 11:00:32Z

What you are doing to alter the CSS is not a good way. Please look for references over the internet. In JS, it doesn't normally work the way you expect it to work. You are trying to change the CSS like you would normally do with CSS, but JS is a bit picky when it comes to CSS. For example to change background color, in CSS you would write "background-color", but in JS "background-color" would be "backgroundColor".

Only change the CSS from JS if absolutely necessary, use CSS class to style your element.

You can reference https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

But if you really want to do it this way, here it is how:

<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>
<button onclick="karanlikyap2()">Karanlık 2</button>
<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 = "100px";
  ogedim.style.width = "100px";
  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>

Useless Code · Accepted Answer · 2017-11-19 12:16:16Z

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

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

<div class="dialog_wrapper hidden" id="dialog_wrapper">
  <div class="dialog" id="dialog">
    <img  id="buyukresim" src="https://lorempixel.com/output/cats-q-c-250-250-4.jpg" height="250">
  </div>
</div>


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

(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:

Collectives™ on Stack Overflow

Add style with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related