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ですべてを設定しようとするのではなく、静的なCSSスタイルを定義してクラス名を操作するほうがよいでしょう。ダイナミックで変更可能である必要がある場合は、実行時に設定するだけです。これはseparation of concernsの助けとなり、コードをよりメンテナンスしやすくします。この場合

あなたが定義されているすべてのものは、あなたが作っているだけで、実際の変更はnoneかblockへdisplayを変え経由の要素を隠したり表示され、静的です。単にblockと定義し、visibility: hiddenで要素を隠すクラスを作成するだけで、同様の効果を簡単に達成できます。次に、その新しいクラスを追加または削除して、それらを非表示にして表示できます。

これは私がそれを書き換えるだろうかです：StackOverflowのがhttps上で提供していますし、あなたのイメージがあるので、（私は混合コンテンツの問題を回避する別の画像を使用しました

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>

HTTP上）

さらに読書：

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

Answer 2

CSSを変更するのは良い方法ではありません。インターネット上の参考文献を探してください。 JSでは、通常は動作するとは思わない方法で動作します。あなたは通常CSSで行うのと同じようにCSSを変更しようとしていますが、JSに関してはCSSが少しばかり気になります。たとえば、背景色を変更するには、CSSでは "背景色"を書きますが、JSでは "背景色"は "背景色"になります。

CSSをJSから変更する必要がある場合は、CSSクラスを使用して要素のスタイルを変更してください。

あなたはhttps://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

を参照することができますしかし、あなたが本当にそれをこのように実行したい場合は、ここではそれがどのようである：それは、

コメントでほのめかし gavgrifとして

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