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

Cửa sổ thuộc tính innerWidth và innerHeight trong JavaScript.


Thuộc tính innerWidth trả về chiều rộng của vùng nội dung cửa sổ và thuộc tính innerHeight trả về chiều rộng của vùng nội dung cửa sổ.

Sau đây là mã cho các thuộc tính window innerWidth và innerHeight trong JavaScript -

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result{
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>Window innerWidth and innerHeight Properties</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button get the innerWidth and innerHeight of the window.
</h3>
<script>
   let resEle = document.querySelector(".result");
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML = "Window.innerWidth = "+window.innerWidth + '<br>';
      resEle.innerHTML += "Window.innerHeight = "+window.innerHeight + '<br>';
   });
</script>
</body>
</html>

Đầu ra

Đoạn mã trên sẽ tạo ra kết quả sau -

Cửa sổ thuộc tính innerWidth và innerHeight trong JavaScript.

Khi nhấp vào nút 'BẤM VÀO ĐÂY' -

Cửa sổ thuộc tính innerWidth và innerHeight trong JavaScript.