使用JavaScript添加样式

Question

我正在尝试使用Javascript设置CSS样式。

我写了这段代码：

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

但代码无效。

注意：我有一个很好的法语，但我的英语并不好。对不起。我希望你明白。

Answer 1

你正在做的改变CSS的方法不是一个好方法。请通过互联网查找参考资料。在JS中，它通常不会像您期望的那样工作。您正在尝试像通常使用CSS一样更改CSS，但是在CSS方面，JS有点挑剔。例如，要改变背景颜色，在CSS中你会写“background-color”，但在JS中“background-color”会是“backgroundColor”。

如果绝对必要，只从JS更改CSS，使用CSS类来设置元素的样式。

您可以参考https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

但如果你真的想这样做，那就是：

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

Answer 2

正如gavgrif在评论中暗示的那样，最好定义静态CSS样式然后操纵类名而不是尝试用JS设置所有内容。只有在需要动态且可更改的情况下才能在运行时进行设置。这将有助于separation of concerns并帮助您的代码更易于维护。

在这种情况下，您定义的所有内容都是静态的，您所做的唯一真正的改变是通过将display更改为none或block来隐藏或显示元素。您只需将它们定义为block并创建一个通过visibility: hidden隐藏元素的类，就可以轻松实现类似的效果。然后，您可以通过添加或删除该新类来隐藏和显示它们。

这是我重写它的方式：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

（我使用了不同的图片来解决混合内容问题，因为StackOverflow是通过https提供的，而您的图片是基于http的。）

进一步阅读：

• more information about classList
• Séparation du fond et de la forme