So nutzen Sie die Vollbild -API… und stylen Sie sie

Schauen wir uns die Vollbild -API in JavaScript an. Es ermöglicht Ihnen eine ziemlich mächtige Sache: Volles Screening genau ein bestimmtes Element, das Sie es möchten. Darüber hinaus können CSS auch bei einem speziellen Selektor helfen.

Jeder Hauptbrowser verfügt über integrierte Vollbildfunktionen in Form der Maximierung des Browserfensters selbst. Sie drücken F11 oder ⌃⌘F (Winkey ⬆ auf dem PC), und der Browser füllt Ihren Monitor und geht so weit, UI -Komponenten zu entfernen (wie die Schaltflächen für die Fensterverwaltung).

Wenn Sie in den Vollbildmodus eingehen, maximiert er den Speicherplatz für eine Webseite, die angezeigt werden soll, aber dies ist nicht immer genau das, was Sie wollen. Häufig möchten Sie entweder ein bestimmtes Element der Seite, z. B. ein Video oder ein Spiel, ein bestimmtes Element der Seite. Hier ist die Vollbild -API nützlich.

Die Full -Screen -API erzielt etwas, was die Vollbildmodi des Browsers nicht in der Lage sind, wie:

• Vollbildmaterial Ein bestimmtes Element der Seite und nicht auf der gesamten Seite.
• Passen Sie die Elemente in CSS an mit dem Full-Screen-Pseudoklasse an, das überprüft, ob das Vollbildflag eines bestimmten Elements festgelegt ist.
• Vollständige Kontrolle darüber , wann ein Vollbildmodus eintritt.

Lass es uns tun

Entscheiden Sie zunächst, welches Element im Vollbildmodus angezeigt werden muss. Danach ist das einzige, was überprüft wird, ob dieses Element die Methode für anforderte () () () und dann auf dem Element aufzurufen.

Beginnen wir mit einem einfachen

Element zum Vollbildmodus:

 <div> </div>

Zunächst wählen wir es aus und prüfen, ob es die Methode hat. Wenn dies der Fall ist, rufen wir die anforderende Methode auf. Es ist so einfach:

 let fullscreen = document.querySelector ("#fullscreen");

if (fullscreen.requestfulscreen) {
  fullscreen.requestfulscreen ();
}

Aber wir möchten diesen Code bedingt ausführen und nicht, sobald jemand auf der Seite landet. Wir werden eine Schaltfläche erstellen, die den Vollbildmodus umschaltet.

 <div>
  <taste> Vollbildmodelle 
</taste>
</div>

 let fullscreen = document.querySelector ("#fullscreen");
lass button = document.querySelector ("#button");

Button.AdDeVentListener ("Click", () => {
  if (! document.fullscreeneLement) {
    Vollbild?
  } anders {
    document.exitfulScreen ();
  }
});

Beachten Sie, wie wir document.fullscreenElement verwenden. Wenn es ein Element gibt, das zuvor Vollbild war, wird es zurückgegeben. Wenn nicht, wird es NULL zurückgeben.

Es ist auch eine gute Idee, zu überprüfen, ob der Vollbildmodus überhaupt im Browser des Benutzers aktiviert wurde. Dafür können wir document.fullscreenEnabled verwenden. Es gibt einen Booleschen, der sagt, ob wir die Vollbild -API in diesem speziellen Browser verwenden können oder nicht. Fullscreen kann vom Benutzer deaktiviert werden, oder der Browser unterstützt dies möglicherweise nicht.

Die letzte Methode, die wir abdecken werden, ist document.exitfulScreen (). Ein Benutzer sollte immer die Möglichkeit haben, den Vollbildmodus zu beenden, indem ESC auf der Tastatur gedrückt wird. Wir könnten eine benutzerdefinierte Möglichkeit machen, den Vollbildmodus mit Exitsfullscreen zu beenden. Es spielt keine Rolle, welches Element Vollbild war. Nach dem Aufrufen dieser Methode kehrt es zurück zum Fenstermodus.

Wie Sie im Code für unser Schaltflächenelement sehen können, überprüfen wir zunächst, ob das Vollbildmodus bereits aktiviert wurde. Basierend auf diesen Informationen gehen wir entweder in den Vollbildmodus oder kehren wir zurück zum Fenstermodus.

Styling Vollbild

Das coole an der Vollbild -API ist, dass wir ein Vollbild -Element in CSS anpassen können. Genau das ist das: Vollbild-Pseudo-Selektor ausgelegt!

 #Fullscreen: Fullscreen {
  Hintergrundfarbe: Gelb;
}

Wie Sie sehen können, ist das #Full -Screen -Div das einzige Element, das eine gelbe Hintergrundfarbe erhält, wenn sich das Element im Vollbildmodus befindet, und nur im Vollbildmodus. Der Haken ist, dass wir ein solches Element nicht tatsächlich auswählen können. Wir können nur das Root -Element auswählen , das im Vollbildmodus von THA T ist . Keines der Kinderelemente entspricht.

Mit anderen Worten, so etwas wie #Button: Fullscreen wählt keine Schaltfläche aus, die im Vollbild -Element enthalten ist.

Einige Browser benötigen ein Präfix, damit dies funktioniert. Firefox verwendet -moz-ful-Screen und Webkit-basierte Browser verwenden das Webkit-Ful-Screen.

 #Fullscreen: -Webkit-full-Screen {
  Hintergrundfarbe: Gelb;
}

#Fullscreen: -moz-full-Screen {
  Hintergrundfarbe: Gelb;
}

Wussten Sie, dass es im Vollbildmodus ein Pseudoelement gibt, das direkt unter Ihrem Vollbild-Element gerendert wird? Standardmäßig ist dieser Pseudoelement schwarz. Wenn Sie die Stile dieses Pseudo-Elements ändern möchten, können Sie es so tun:

 #fullscreen :: backdrop {
  Hintergrundfarbe: Skyblue;
}

Hier ist das letzte Beispiel. Denken Sie daran, dass der Vollbildmodus möglicherweise nicht mit eingebetteten Stiften funktioniert, sodass Sie ihn außerhalb dieses Artikels anzeigen müssen.

Das obige ist der detaillierte Inhalt vonSo nutzen Sie die Vollbild -API… und stylen Sie sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!