Làm cách nào để tạo một phần chiếm toàn bộ màn hình trong html?

Lớp giả CSS

let element = document.querySelector[".element"];

element.requestFullscreen[];

5 cho phép bạn chọn và tạo kiểu cho bất kỳ phần tử nào hiện đang ở chế độ toàn màn hình. Bạn có biết những lần bạn cho phép một hình ảnh hoặc một số thành phần khác chiếm toàn màn hình không?

.element:fullscreen {
  font-size: 3em;
  text-align: center;
}

Và, trong những trường hợp có nhiều phần tử ở chế độ toàn màn hình, thao tác này sẽ chọn tất cả các phần tử đó

Chế độ toàn màn hình và API toàn màn hình

Này, đầu to lên đây. Có một sự khác biệt giữa việc đặt ứng dụng của bạn ở chế độ toàn màn hình ở cấp hệ điều hành và tạo một phần tử ở chế độ toàn màn hình. Nếu bạn chuyển sang chế độ toàn màn hình của trình duyệt [

let element = document.querySelector[".element"];

element.requestFullscreen[];

7+

let element = document.querySelector[".element"];

element.requestFullscreen[];

8+

let element = document.querySelector[".element"];

element.requestFullscreen[];

9 trên MacOS,

let element = document.querySelector[".element"];

element.requestFullscreen[];

0 trên Windows] và bạn chọn một thành phần bằng cách sử dụng

let element = document.querySelector[".element"];

element.requestFullscreen[];

5, thì thành phần đó sẽ không khớp với thành phần đó. Thay vào đó, một phần tử khớp với

let element = document.querySelector[".element"];

element.requestFullscreen[];

5 khi nó chuyển sang chế độ toàn màn hình bằng API toàn màn hình

let element = document.querySelector[".element"];

element.requestFullscreen[];

Vì vậy, giả sử chúng ta muốn đưa nội dung bên trong phần tử

let element = document.querySelector[".element"];

element.requestFullscreen[];

3 vào giữa khung nhìn khi nó ở chế độ toàn màn hình. Chúng tôi nhắm mục tiêu nó với

let element = document.querySelector[".element"];

element.requestFullscreen[];

5, sau đó tạo kiểu cho phù hợp

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

Chúng ta có thể chọn phần tử con của các phần tử toàn màn hình

Tương tự, chúng ta có thể chọn phần tử con của một phần tử được chọn ở chế độ toàn màn hình, chẳng hạn như các đoạn văn trong phần tử

let element = document.querySelector[".element"];

element.requestFullscreen[];

3 đó

section:fullscreen p {
  font-size: 2em;
}

Bí quyết, Thuật, mẹo. Chỉ tạo kiểu khi không ở chế độ toàn màn hình

Và nếu chúng ta chỉ muốn áp dụng các kiểu khi phần tử không ở chế độ toàn màn hình, chúng ta có thể sử dụng nó cùng với lớp giả

let element = document.querySelector[".element"];

element.requestFullscreen[];

6

________số 8

hỗ trợ trình duyệt

Một số trình duyệt cũ hơn có thể cần tiền tố nhà cung cấp, chẳng hạn như

let element = document.querySelector[".element"];

element.requestFullscreen[];

7 trong Internet Explorer 11

IEEdgeFirefoxChromeSafariOpera11 1All64 271 36 458 5Android ChromeAndroid FirefoxTrình duyệt AndroidiOS SafariOpera MobileAllNo91No62Source. caniuse

1 Được hỗ trợ dưới dạng

let element = document.querySelector[".element"];

element.requestFullscreen[];

7
2 Được hỗ trợ dưới dạng

let element = document.querySelector[".element"];

element.requestFullscreen[];

9 trong Firefox 9-63
3 Được hỗ trợ dưới dạng

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

0 trong Chrome 15-70.
4 Được hỗ trợ dưới dạng

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

0 trong Safari 6+.
5 Được hỗ trợ dưới dạng

section:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
}

0 trong Opera 15-57+.

Thử nghiệm

Bản demo sau đây cho thấy cách chúng ta có thể kiểm soát nền của thành phần hình ảnh ở chế độ toàn màn hình. Nhấp vào nút để chuyển đổi chế độ toàn màn hình cho hình ảnh và xem các kiểu toàn màn hình có hiệu lực

Ví dụ dưới đây trượt trong menu điều hướng lớp phủ từ trái sang phải [0 đến 100% chiều rộng], khi nó được kích hoạt

Trượt vào từ bên cạnh

/* Mở khi ai đó nhấp vào phần tử span */
function openNav[] {
  tài liệu. getElementById["myNav"]. Phong cách. chiều rộng = "100%";
}

/* Đóng khi ai đó nhấp vào biểu tượng "x" bên trong lớp phủ */
function closeNav[] {
  tài liệu. getElementById["myNav"]. Phong cách. width = "0%";
}

Tự mình thử »

Ví dụ bên dưới trượt trong menu điều hướng lớp phủ từ trên xuống dưới [0 đến 100% chiều cao]

Ghi chú. Trong ví dụ này, lưu ý rằng CSS hơi khác so với ở trên [chiều cao mặc định hiện là 0, chiều rộng là 100% và tràn-y bị ẩn [tắt cuộn dọc, ngoại trừ màn hình nhỏ]]

Trượt từ trên xuống

/* Mở */
function openNav[] {
  tài liệu. getElementById["myNav"]. Phong cách. height = "100%";
}

/* Close */
function closeNav[] {
  tài liệu. getElementById["myNav"]. Phong cách. height = "0%";
}

Tự mình thử »

Ví dụ này mở menu điều hướng không có hoạt ảnh

Mở menu không có hình ảnh động

/* Open */
function openNav[] {
  tài liệu. getElementById["myNav"]. Phong cách. display = "chặn";
}

/* Close */
function closeNav[] {
  tài liệu. getElementById["myNav"]. Phong cách. display = "none";
}

Tự mình thử »

Mẹo. Đi tới Hướng dẫn CSS Navbar của chúng tôi để tìm hiểu thêm về các thanh điều hướng

Bạn đã bao giờ nghe nói về Không gian W3Schools chưa?