✔ Javascript - Style vom Stylesheet geht verloren

[ByeBye 249712]

Hallo,

Ich hab da ein kleines Problem.
Ich möchte Bilder von einer Slideshow im Vollbildmodus darstellen,
dies wird über das Drücken eines Buttons realisiert.
Beim Drücken des Buttons wird in der Javascriptdatei eine Funktion ausgeführt, welche dieses bewerkstelligen soll.
Das Bild, welches sich in einem div-Container befindet, wird dann zwar im Vollbildmodus dargestellt, allerdings hängt es links außen am Rand und lässt sich nicht in die Mitte verschieben. Jegliches Anpassen des Containers im stylesheet bringt nichts. Es scheint so, als ob er die Styles aus dem Stylesheet nicht anwenden kann.
Weis jemand warum und wie ich über die Javascriptfunktion auf die Styles zugreifen kann bzw diese anders implementieren kann?


Hier der Code:

<button onclick ="switchtofullscreen()" id="fullscreenbutton">fullscreen</button>

<div id="picturefullscreen"><img src="../images/Bild_1.jpg" height="850"/></div>

#picturefullscreen{
    margin-left: 200px;
    display: none;
}

function switchtofullscreen(){

document.getElementById('picturefullscreen').style.display = 'block';   
var element = document.getElementById('picturefullscreen');

if(element.requestFullscreen) {
    element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
}
}

 

[SpiceLab]

Ohne die weiteren Gesetzmäßigkeiten näher zu kennen, sollte es im CSS für die horizontale Zentrierung eines Elements margin:auto anstelle von margin-left:200px lauten.

 

[ByeBye 249712]

Auch dass bringt leider gar nichts. Egal welche Anpassungen ich am Container vornehme. Sie werden im Vollbildmodus nicht übernommen.

 

[SpiceLab]

Und hiermit?

...
document.getElementById('picturefullscreen').style.display = 'block';
document.getElementById('picturefullscreen').style.margin = 'auto';
...

 

[ByeBye 249712]

Leider auch nicht hmmm

 

[SpiceLab]

Das Bild, welches sich in einem div-Container befindet, wird dann zwar im Vollbildmodus dargestellt, allerdings hängt es links außen am Rand und lässt sich nicht in die Mitte verschieben

Wahrscheinlich suchst du eher hiernach:

#picturefullscreen img {display:block;margin:auto}

 

[ByeBye 249712]

Mit "display:block" zeige ich ja das Bild von vornerein an, dass möchte ich aber nicht.
Ich möchte es nur anzeigen wenn man den Button drückt.

Kann es sein das man in Javascript etwas in Variablen nur ohne stylesheetinhalt abspeichern kann,
macht dass Sinn?

 

[SpiceLab]

Mit "display:block" zeige ich ja das Bild von vornerein an, dass möchte ich aber nicht.
Ich möchte es nur anzeigen wenn man den Button drückt.

Falsch. Du versteckst mit deinem gezeigten CSS das DIV #picturefullscreen, und schaltest dieses per JS sichtbar. Somit bleibt sein Kindelement trotz display:block zunächst unsichtbar.

display:block dient hier dem Bildelement zur horizontalen Zentrierung mittels margin:auto.

 

[Sempervivum]

wird dann zwar im Vollbildmodus dargestellt, allerdings hängt es links außen am Rand und lässt sich nicht in die Mitte verschieben

Ist das nicht ein Widerspruch? Unter Vollbildmodus verstehe ich, dass das Bild das ganze Browserfenster ausfüllt. Dann stellt sich die Frage mit der Zentrierung nicht. Wenn Du das Bild aber nur vergrößert darstellen willst, frage ich mich, warum Du nicht einfach ein Lightbox-Plugin verwendest. Das nimmt dir die ganze Arbeit mit Auf- und Abschalten und Anordnung ab.

 

[SpiceLab]

Ist das nicht ein Widerspruch? Unter Vollbildmodus verstehe ich, dass das Bild das ganze Browserfenster ausfüllt.

Guter Einwand @Sempervivum

Aber vielleicht ist der Begriff nur unglücklich gewählt, und soll stattdessen das Bild in seiner wahren Größe umschreiben.