Thay đổi kích thước màn hình bằng JavaScript (window.resizeTo,window.resizeBy) | Laptrinhcanban.com

Thay đổi kích thước màn hình bằng JavaScript (window.resizeTo,window.resizeBy)

Hướng dẫn cách thay đổi kích thước màn hình bằng JavaScript. Bạn sẽ biết cách sử dụng các phương thức như window.resizeTo và window.resizeBy để thay đổi chiều rộng và chiều cao của màn hình bằng JavaScript sau bài học này.

Có 2 cách thay đổi kích thước màn hình bằng JavaScript như sau:

  • Phương thức window.resizeTo : chỉ định kích thước mới
  • Phương thức window.resizeBy : tăng giảm kích thước cũ

Thay đổi kích thước màn hình bằng window.resizeTo trong JavaScript

window.resizeTo trong JavaScript là một phương thức của window Object, có tác dụng thay đổi kích thước màn hình hiện tại bằng cách chỉ định các giá trị chiều rộng và chiều cao mới.

Cú pháp sử dụng window.resizeTo trong JavaScript như sau:

window.resizeTo(width, height)

Trong đó widthheight là chiều rộng và chiều cao mới (bao gồm cả thanh cuộn, thanh tiêu đề…) và chúng được tính bởi đơn vị pixcel.

Lưu ý là phương thức này chỉ có tác dụng đối với các trang cùng nằm trong một website mà thôi.

Ví dụ cụ thể:

let newwindow = open('test.html', 'mywindow', 'width=600,height=400');

newwindow.resizeTo(300, 300);

Sau đây là demo về cách dùng các thuộc tinh trên để thay đổi kích thước màn hình bằng JavaScript.

Trước hết, chúng ta tạo một trang test có nội dung sau:

<!DOCTYPE html>
<html lang="vi">
<body>

<h2>Test</h2>

</body>
</html>

Sau đó, chúng ta sẽ mở và thay đổi kích thước trang test trên, bằng trang đích có mã nguồn sau đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h2>Thay đổi kích thước màn hình</h2>


<input type="button" value="open" id="btnOpen">
<input type="button" value="change" id="btnChange">

<script>
let newwindow;
let btnOpen = document.getElementById('btnOpen');
let btnChange = document.getElementById('btnChange');

btnOpen.addEventListener('click', function(){
newwindow = open('./sample1.html', 'mywindow', 'width=800,height=400');
});

btnChange.addEventListener('click', function(){
newwindow.resizeTo(300, 300);
});
</script>

</body>
</html>

Với mã HTML trên, sau khi click vào nút open thì trang test sẽ được mở bằng phương thức open với kích thước chỉ định (800x400) như sau:

thay đổi kích thước màn hình bằng resizeTo trong JavaScript

Sau đó, khi click vào nút change thì trang test mới mở sẽ được thay đổi kích thước thành 300x300 như sau:

thay đổi kích thước màn hình bằng resizeTo trong JavaScript

Thay đổi kích thước màn hình bằng window.resizeBy trong JavaScript

window.resizeBy trong JavaScript là một phương thức của window Object, có tác dụng thay đổi kích thước màn hình hiện tại bằng cách tăng giảm các giá trị chiều rộng và chiều cao hiện tại.

Cú pháp sử dụng window.resizeBy trong JavaScript như sau:

window.resizeBy(width, height)

Trong đó widthheight là lượng tăng hoặc giảm so với chiều rộng và chiều cao ban đầu. Chúng được chỉ định bởi các số nguyên (số âm hoặc số dương), và chúng được tính bởi đơn vị pixcel.

Lưu ý là phương thức này chỉ có tác dụng đối với các trang cùng nằm trong một website mà thôi.

Ví dụ cụ thể:

let newwindow = open('test.html', 'mywindow', 'width=600,height=400');

newwindow.resizeBy(100, -50);

Sau đây là demo về cách dùng các thuộc tinh trên để thay đổi kích thước màn hình bằng JavaScript.

Trước hết, chúng ta tạo một trang test có nội dung sau:

<!DOCTYPE html>
<html lang="vi">
<body>

<h2>Test</h2>

</body>
</html>

Sau đó, chúng ta sẽ mở và thay đổi kích thước trang test trên, bằng trang đích có mã nguồn sau đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h2>Thay đổi kích thước màn hình</h2>


<input type="button" value="open" id="btnOpen">
<input type="button" value="change" id="btnChange">

<script>
let newwindow;
let btnOpen = document.getElementById('btnOpen');
let btnChange = document.getElementById('btnChange');

btnOpen.addEventListener('click', function(){
newwindow = open('./sample1.html', 'mywindow', 'width=800,height=400');
});

btnChange.addEventListener('click', function(){
newwindow.resizeBy(300, 300);
});
</script>

</body>
</html>

Với mã HTML trên, sau khi click vào nút open thì trang test sẽ được mở bằng phương thức open với kích thước chỉ định (800x400) như sau:

thay đổi kích thước màn hình bằng resizeTo trong JavaScript

Sau đó, khi click vào nút change thì trang test mới mở sẽ được tăng chiều rộng 100px và giảm chiều cao 100px như sau:

thay đổi kích thước màn hình bằng resizeBy trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách thay đổi kích thước màn hình bằng JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.