Javascript di chuyển div khi nhấp

Thí dụ

Gọi một chức năng khi một nút được bấm

Nhấp vào đây

Tự mình thử »

Thêm ví dụ bên dưới

Định nghĩa và cách sử dụng

Sự kiện title xảy ra khi người dùng nhấp vào một phần tử HTML

cú pháp

Trong JavaScript, sử dụng phương thức addEventListener[]

mục tiêu. addEventListener["click", myScript];

Tự mình thử »

chi tiết kỹ thuật

bong bóng. CóCó thể hủy. Có Loại sự kiện. ChuộtSự kiệnHỗ trợ
thẻ HTML. Tất cả ngoại trừ. , ,
, ,,,,Hãy tự mình thử »

Một ví dụ khác về cách thay đổi màu của một phần tử

Nhấp vào tôi để thay đổi màu sắc của tôi

Tự mình thử »

Nhấp để sao chép văn bản từ trường nhập liệu này sang trường nhập liệu khác

Sao chép văn bản

hàm myFunction[] {
tài liệu. getElementById["trường2"]. giá trị = tài liệu. getElementById["trường1"]. giá trị;
}

Tự mình thử »

Cách gán sự kiện " title" cho đối tượng cửa sổ

cửa sổ. title = myFunction;

hàm myFunction[] {
tài liệu. getElementsByTagName["BODY"][0]. Phong cách. backgroundColor = "vàng";
}

Tự mình thử »

Sử dụng title để tạo danh sách thả xuống

tài liệu. getElementById["myBtn"]. title = function[] {myFunction[]};

hàm myFunction[] {
tài liệu. getElementById["myDropdown"]. danh sách lớp học. chuyển đổi ["hiển thị"];
}

Tự mình thử »

Hỗ trợ trình duyệt

title là tính năng DOM Cấp 2 [2001]

Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt

ChromeEdgeFirefoxSafariOperaIECóCóCóCóCó9-11

Trong đoạn mã sau, chúng tôi đã xác định một phần tử div bao gồm văn bản 'Xin chào thế giới' để di chuyển nó trên trình duyệt. Đối với điều này, chúng tôi đã sử dụng trình xử lý sự kiện onClick để chỉ định điều gì sẽ xảy ra khi nhấp chuột vào cửa sổ. Các thuộc tính clientX và clientY của đối tượng sự kiện cho biết vị trí ngang và dọc của con trỏ khi sự kiện xảy ra so với góc trên bên trái của cửa sổ và pageX và pageY cung cấp tọa độ trong không gian của tài liệu. Để đặt vị trí trên cùng của phần tử so với cạnh trên cùng của phần tử tiếp theo, chúng tôi đã sử dụng kiểu thuộc tính. hàng đầu và phong cách. left đặt vị trí của cạnh trái của một phần tử so với cạnh trái của phần tử tiếp theo. Mã này hoạt động chính xác trên Internet Explorer

Đây là mã

Di chuyển div

biến X, Y;
cửa sổ. tài liệu. title=moveDiv;
hàm moveDiv[]{
X = [tài liệu. lớp] ? . trangX. biến cố. khách hàngX
Y = [tài liệu. lớp] ? . trangY. biến cố. khách hàng
tài liệu. getElementById['div']. Phong cách. vị trí = "tuyệt đối";
tài liệu. getElementById['div']. Phong cách. trái=X;
tài liệu. getElementById['div']. Phong cách. trên cùng=Y;
}

Đầu ra sẽ được hiển thị dưới dạng

Nếu bạn nhấp vào bất kỳ đâu trên cửa sổ, phần tử sẽ di chuyển đến vị trí đó

Tải xuống mã nguồn

        

Div là một thành phần trang web có thể được di chuyển trên màn hình hoặc thay đổi vị trí trên màn hình một cách tự động. Vị trí được thay đổi bằng cách điều chỉnh các thuộc tính kiểu bên trái và trên cùng. Tạo div di chuyển bằng JavaScript là một nhiệm vụ tương đối đơn giản. Tất cả những gì cần thiết là một chút mã HTML, CSS và JavaScript. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách tạo div chuyển động bằng JavaScript

Mã HTML

Điều đầu tiên chúng ta cần là một số mã HTML. Chúng ta sẽ tạo một div có id là "movingDiv". Bên trong div này, chúng tôi sẽ đặt một số nội dung. Nội dung này có thể là bất cứ thứ gì bạn muốn, nhưng trong ví dụ này, chúng tôi sẽ chỉ đặt một số văn bản

 This is my moving div! 

Bây giờ chúng ta đã có mã HTML, chúng ta cần một số mã CSS

Mã CSS

Mã CSS là thứ sẽ làm cho div của chúng ta thực sự di chuyển. Chúng tôi sẽ đặt vị trí của div của chúng tôi thành "tương đối". Điều này sẽ cho phép chúng tôi di chuyển div của mình xung quanh bằng JavaScript. Chúng tôi cũng sẽ đặt chiều rộng và chiều cao của div của chúng tôi

#movingDiv { position: relative; width: 200px; height: 200px; }

Bây giờ chúng ta đã có mã HTML và CSS, chúng ta cần một số mã JavaScript

Mã JavaScript

Mã JavaScript là thứ thực sự sẽ khiến div của chúng ta di chuyển. Chúng tôi sẽ sử dụng hàm setInterval để di chuyển div của chúng tôi cứ sau 1000 mili giây [1 giây]. Chúng tôi cũng sẽ sử dụng các thuộc tính CSS "top" và "left" để di chuyển div của chúng tôi xung quanh

var interval = setInterval[function[] {
   var div = document.getElementById["movingDiv"];
   div.style.top = div.offsetTop + 1 + "px";
   div.style.left = div.offsetLeft + 1 + "px"; },
   1000];

Thí dụ

Đây là mã làm việc đầy đủ cho ví dụ này -

   


   
 This is my moving div! 
   

Giải thích từng dòng của đoạn mã trên -

• Dòng 1 - Chúng tôi bắt đầu bằng cách tạo một tài liệu HTML

• Dòng 3 - Chúng tôi tạo một phần tử đầu

• Dòng 4 - Chúng tôi tạo một yếu tố phong cách. Bên trong phần tử kiểu này, chúng tôi sẽ đặt mã CSS của chúng tôi

• Dòng 5 - Chúng tôi tạo quy tắc CSS cho div của mình với id là "movingDiv". Chúng tôi đặt vị trí thành "tương đối". Chúng tôi cũng đặt chiều rộng và chiều cao của div

• Dòng 12 - Chúng tôi tạo một phần tử cơ thể. Bên trong phần tử nội dung này, chúng tôi sẽ đặt mã HTML của chúng tôi

• Dòng 13 - Chúng tôi tạo một div có id là "movingDiv". Bên trong div này, chúng tôi đặt một số văn bản

• Dòng 14 - Chúng tôi tạo một phần tử tập lệnh. Bên trong phần tử tập lệnh này, chúng tôi sẽ đặt mã JavaScript của mình

• Dòng 15 - Chúng tôi tạo một biến gọi là "khoảng". Chúng tôi đặt biến này thành hàm setInterval. Hàm này sẽ di chuyển div của chúng ta sau mỗi 1000 mili giây [1 giây]

• Dòng 16 - Chúng tôi tạo một biến gọi là "div". Chúng tôi đặt biến này thành phần tử HTML có id là "movingDiv"

• Dòng 17 - Chúng tôi sử dụng thuộc tính CSS "top" để di chuyển div xuống 1 pixel

• Dòng 18 - Chúng tôi sử dụng thuộc tính CSS "left" để di chuyển div sang phải 1 pixel

• Dòng 22 - Chúng tôi kết thúc tài liệu HTML của mình

Trong hướng dẫn này, chúng ta đã tìm hiểu cách tạo div chuyển động bằng JavaScript. Chúng tôi đã bắt đầu bằng cách tạo một số mã HTML. Sau đó, chúng tôi đã tạo một số mã CSS. Cuối cùng, chúng tôi đã tạo một số mã JavaScript

Làm cách nào để di chuyển một div trong JavaScript?

Làm cách nào để di chuyển div từ trái sang phải trong JavaScript?