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

Thuộc tính bên trong cửa sổ HTML

Thuộc tính innerWidth của HTML Window trả về chiều rộng của vùng nội dung của một cửa sổ trong tài liệu HTML.

Cú pháp

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

window.innerWidth

Hãy để chúng tôi xem một ví dụ về Thuộc tính bên trong 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 innerWidth Property</h1>
<button onclick="display()" class="btn">Show window inner width</button>
<div class="show"></div>
<script>
   function display() {
      document.querySelector('.show').innerHTML = 'Window inner width is: ' + window.innerWidth + "px";
   }
</script>
</body>
</html>

Đầu ra

Thuộc tính bên trong cửa sổ HTML

Nhấp vào “ Hiển thị chiều rộng bên trong cửa sổ ”Để hiển thị chiều rộng bên trong của vùng nội dung:

Thuộc tính bên trong cửa sổ HTML