Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính bên ngoài cửa sổ HTML

Thuộc tính HTML Window externalWidth trả về chiều rộng của cửa sổ trình duyệt bao gồm tất cả các thành phần giao diện.

Cú pháp

Sau đây là cú pháp -

window.outerWidth

Hãy để chúng tôi xem một ví dụ về Thuộc tính bên ngoài cửa sổ HTML -

Ví dụ

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
   }
</style>
<body>
<h1>HTML Window outerWidth Property</h1>
<button onclick="display()" class="btn">Show browser window width</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector('.show').innerHTML = 'Browser Window width is: ' + window.outerWidth + "px";
   }
</script>
</body>
</html>

Đầu ra

Thuộc tính bên ngoài cửa sổ HTML

Nhấp vào “ Hiển thị chiều cao cửa sổ trình duyệt ”Để hiển thị chiều cao của cửa sổ trình duyệt bao gồm các thành phần giao diện:

Thuộc tính bên ngoài cửa sổ HTML