Stil mit JavaScript hinzufügen

Question

Ich versuche CSS-Stile mit Javascript zu setzen.

Ich habe diesen Code geschrieben:

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

Aber der Code funktioniert nicht.

Hinweis: Ich habe ein gutes Französisch, aber mein Englisch ist nicht gut. Entschuldigung. Ich hoffe, Sie verstehen.

Answer 1

Wie gavgrif bei in den Kommentaren angedeutet es, Es wäre besser, statische CSS-Stile zu definieren und dann die Klassennamen zu ändern, anstatt alles mit JS zu setzen. Nur Dinge zur Laufzeit setzen, wenn sie dynamisch und veränderbar sein müssen. Dies wird mit der separation of concerns helfen und helfen, Ihren Code wartbarer zu machen.

In diesem Fall ist alles, was Sie definieren, statisch, die einzige wirkliche Änderung, die Sie vornehmen, ist das Verstecken oder Anzeigen der Elemente über die Änderung display zu none oder block. Sie können leicht einen ähnlichen Effekt erzielen, indem Sie sie einfach als block definieren und eine Klasse erstellen, die ein Element über visibility: hidden ausblendet. Dann können Sie sie ausblenden und anzeigen, indem Sie diese neue Klasse hinzufügen oder entfernen.

Dies ist, wie ich es neu schreiben würde:

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>

(Ich habe ein anderes Bild verwendet um Mixed-Content-Probleme zu bekommen, weil Stackoverflow über https und Ihr Bild serviert wird, ist auf http)

Weiterführende Literatur:.

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

Answer 2

Was Sie tun, um die CSS zu ändern, ist kein guter Weg. Bitte suchen Sie nach Referenzen über das Internet. In JS funktioniert es normalerweise nicht so, wie Sie es erwarten. Sie versuchen, das CSS so zu ändern, wie Sie es normalerweise mit CSS tun würden, aber JS ist etwas wählerisch, wenn es um CSS geht. Um beispielsweise die Hintergrundfarbe zu ändern, würden Sie in CSS "background-color" schreiben, aber in JS "background-color" wäre "backgroundColor".

Ändern Sie nur das CSS von JS wenn unbedingt notwendig, verwenden Sie CSS-Klasse, um Ihr Element zu stylen.

Sie https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

verweisen können Aber wenn Sie wirklich es auf diese Weise tun wollen, hier ist es wie:

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