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 Show
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ụngSự kiện cú phápTrong 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ậtbong 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ôiTự 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() { Cách gán sự kiện "onclick" cho đối tượng cửa sổ cửa sổ. onclick = myFunction; hàm myFunction() { Sử dụng onclick để tạo danh sách thả xuống tài liệu. getElementById("myBtn"). onclick = function() {myFunction()}; hàm myFunction() { Hỗ trợ trình duyệt
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt ChromeEdgeFirefoxSafariOperaIECóCóCóCóCó9-11Trong đ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 divbiến X, Y; cửa sổ. tài liệu. onclick=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; } Xin chào thế giới Đầ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
Bây giờ chúng ta đã có mã HTML, chúng ta cần một số mã CSS Mã CSSMã 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ã JavaScriptMã 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 -
Giải thích từng dòng của đoạn mã trên -
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?Mã JavaScript
. 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. use the setInterval function to move our div every 1000 milliseconds (1 second). We will also use the CSS properties "top" and "left" to move our div around.
Làm cách nào để di chuyển div từ trái sang phải trong JavaScript?Thuộc tính đúng kiểu . Set the right position of a element: style. right = "100px";. Using negative values - Set the right position of a
element: getElementById("myDiv"). style. right = "-100px";. Return the right position of a
element: getElementById("myDiv"). right);. Div có thể có sự kiện nhấp chuột không?JavaScript cung cấp phương thức addEventListener() để tạo văn bản có thể nhấp được trong thẻ một chức năng đơn giản cũng có thể được liên kết với chức năng onclick của thẻ div để làm cho div có thể nhấp được . Thao tác có thể nhấp có thể được áp dụng bằng cách truy cập thuộc tính id hoặc lớp.
Làm cách nào để di chuyển một phần tử bằng JavaScript?Trong JavaScript đơn giản, bạn có thể sử dụng phương thức appendChild() để di chuyển phần tử nguồn hiện có trong tài liệu sang phần tử đích . |