Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Phương thức moveBy() của Window trong HTML

Phương thức moveBy() của đối tượng Window di chuyển cửa sổ trình duyệt một khoảng xác định so với vị trí hiện tại của nó.

Cú pháp

window.moveBy(x, y)

Tham số x và y lần lượt là khoảng cách di chuyển theo trục ngang và trục dọc (đơn vị pixel). Giá trị dương di chuyển phải/xuống, giá trị âm di chuyển trái/lên.

Ví dụ minh họa

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
    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;
  }
</style>
<body>
<h1>Demo phương thức moveBy() của Window</h1>
<button onclick="create()" class="btn">Tạo cửa sổ mới và di chuyển</button>
<script>
  function create() {
    var newWindow = window.open('', '', 'width=150,height=150');
    newWindow.moveBy(550, 200);
  }
</script>
</body>
</html>

Kết quả

Nhấn nút "Tạo cửa sổ mới và di chuyển" để mở cửa sổ popup và dịch chuyển nó 550px sang phải và 200px xuống so với vị trí mặc định.

Khác biệt với moveTo(): moveTo() đặt vị trí tuyệt đối, moveBy() di chuyển tương đối. Cả hai đều chỉ tác động lên cửa sổ mở bằng window.open().