Đặt vị trí của một phần tử bằng JavaScript - js vị trí của phần tử

Để đặt vị trí của một phần tử, hãy chọn phần tử và đặt thuộc tính vị trí của nó thành `tuyệt đối`. Sử dụng thuộc tính `top` để đặt vị trí thẳng đứng của phần tử, ví dụ: `box.style.top = ‘150px’ ‘. Sử dụng thuộc tính `left` để đặt vị trí ngang của phần tử, ví dụ: `box.style.left = ‘150px’ ‘.

Bạn đang xem : js position của phần tử

Đặt vị trí của phần tử bằng JavaScript

Table of Contents #

Đặt vị trí của một phần tử bằng JavaScript # < / span>

Để đặt vị trí của một phần tử:

Chọn phần tử và đặt thuộc tính vị trí của nó thành tuyệt đối .


 Sử dụng thuộc tính  top  để đặt vị trí thẳng đứng của phần tử, ví dụ:

 box.style.top = '150px' . 
 Sử dụng thuộc tính  left  để đặt vị trí ngang của phần tử, ví dụ:

 box.style.left = '150px' .


 Đây là HTML cho các ví dụ trong bài viết này. 
 index.html 
  
 Đã sao chép! 
 
   
 & lt;! 
  LOẠI TÀI LIỆU  
 html 
  & gt; 
 
 
 
 & lt; 
 html 
  lang 
  
 = 
  "
 vi  "
 
  & gt; 
 
   
 
 & lt; 
 đầu 
  & gt; < / p> 
     
 
 & lt; 
 meta 
  bộ ký tự 
  
 = 
  "
 UTF-8 < p class = "dấu chấm câu"> "
 
  / & gt; 
 
   
 
 & lt; / 
 đầu 
  & gt; 
 

   
 
 & lt; 
 body 
  & gt; < / p> 
     
 
 & lt; 
 div 
  id 
  
 = 
  "
 box  "
 
  
 style 
  
 = 
 " 
  
 background-color 
 : 
  cá hồi 
 ; 
  width 
 : 
  100 
  px 
 ; 
  chiều cao 
 :  
 100 
  px 
 
  "
  
  & gt; 
 
      Hộp 1
     
 
 & lt; / 
 div 
  & gt; 
 

     
 
 & lt; 
 script 
  src 
  
 = 
  "
 index.js < p class = "dấu chấm câu"> "
 
  & gt; 
 
  
 < p class = "thẻ mã thông báo">  
 & lt; / 
 script 
  & gt; < / p> 
   
 
 & lt; / 
 body 
  & gt; 
 
 
 
 & lt; / 
 html 
  & gt; 
 
 
 Và đây là mã JavaScript có liên quan. 
 index.js 
 
 Đã sao chép! 
 
   const 
 box  = 
  document 
 . 
  getElementById 
  (
  'box' 
 ) 
 ; 

hộp . 
  style 
 . 
  vị trí 
  = 
  'tuyệt đối' 
  ; 

hộp . 
  style 
 . 
  top 
  = 
  '150px' 
  ; 
hộp . 
  style 
 . 
  left 
  = 
  '150px' 
  ; 

 bảng điều khiển 
 . 
  log 
 < p class = "dấu chấm câu"> (
 box . 
  style 
 . 
  đầu trang 
 ) 
 ; 
 bảng điều khiển 
 . 
  log 
 < p class = "dấu chấm câu"> (
 box . 
  style 
 . 
  trái 
 ) 
 ; 
 
 Đầu tiên, chúng tôi đặt phần tử của

 vị trí  tới

 tuyệt đối . 
 Khi một phần tử được định vị là  tuyệt đối , nó sẽ bị xóa khỏi thông thường

luồng tài liệu. 
 Vị trí cuối cùng của phần tử được xác định bởi các giá trị của  top ,  right ,

 bottom  và  left . 
   top ,  right ,  thuộc tính  và  left  dưới cùng không ảnh hưởng đến

phần tử không được định vị.  
 Chúng tôi đặt  đầu  của phần tử

Thuộc tính CSS thành  150px , chỉ định khoảng cách đến cạnh trên cùng của

khối chứa phần tử. 
 Sau đó, chúng tôi sử dụng  left 

để đặt khoảng cách đến cạnh trái của khối chứa phần tử. 


 Nếu bạn phải đặt vị trí của phần tử ở nhiều vị trí khác nhau trong mã của mình, bạn có thể tạo một hàm có thể sử dụng lại để hoàn thành công việc. 

 < p class = "comment-code-title"> index.js 
  
 Đã sao chép!  
   function 
  positionElement 
  (
  el 
, 
 x , 
 y  ) 
  {
  el . 
  style 
 . 
  vị trí 
  = 
  'tuyệt đối' 
  ; 
  el . 
  style 
 . 
  left 
  = 
 x  + 
  ' px '
 ; 
  el . 
  style 
 . 
  top 
  = 
 y  + 
  ' px '
 ; 
} 

 const 
 box  = 
  tài liệu 
 . 
  getElementById 
  (
  ' hộp '
) 
 ; 
 bảng điều khiển 
 . 
  log 
 < p class = "dấu chấm câu"> (
  positionElement 
  (
 box , 
  50 
 , 
  150 
 ) 
 ) 
 ; 

 bảng điều khiển 
 . 
  log 
 < p class = "dấu chấm câu"> (
 box . 
  style 
 . 
  trái 
 ) 
 ; 
 bảng điều khiển 
 . 
  log 
 < p class = "dấu chấm câu"> (
 box . 
  style 
 . 
  đầu trang 
 ) 
 ; 
 
 Hàm lấy phần tử, vị trí  x  và  y  làm tham số, đặt

thuộc tính  position  của phần tử thành  tuyệt đối  và định vị nó. 
 Định vị một Phần tử bên dưới Khi nhấp chuột  #  
  Để định vị một phần tử dưới con chuột khi nhấp:  

 Đặt thuộc tính  position  của phần tử thành  tuyệt đối . 
 Thêm trình xử lý sự kiện  click  vào tài liệu   đối tượng. 
 Mỗi lần nhấp chuột, hãy đặt thuộc tính  top  và  left  của phần tử

đến tọa độ của chuột. 

 Đây là HTML cho ví dụ tiếp theo. 
 index.html 
  
 Đã sao chép! 
 
   
 & lt;! 
  LOẠI TÀI LIỆU 
  html < / p> 
 & gt; 
 
 
 
 & lt; 
 html 
  lang 
  
 = 
  "
 vi  "
 
  & gt; 
 
   
 
 & lt; 
 đầu 
  & gt; < / p> 
     
 
 & lt; 
 meta 
  bộ ký tự 
  
 = 
  "
 UTF-8 < p class = "dấu chấm câu"> "
 
  / & gt; 
 
   
 
 & lt; / 
 đầu 
  & gt; 
 

   
 
 & lt; 
 body 
  & gt; < / p> 
     
 
 & lt; 
 div 
  id 
  
 = 
  "
 box  "
 
  
 style 
  
 = 
 " 
  
 background-color 
 : 
  cá hồi 
 ; 
  width 
 : 
  100 
  px 
 ; 
  chiều cao 
 :  
 100 
  px 
 
  "
  
  & gt; 
 
      Hộp 1
     
 
 & lt; / 
 div 
  & gt; 
 

     
 
 & lt; 
 script 
  src 
  
 = 
 "
 index.js " 
 
  & gt; 
 
  
  
 
 & lt; /  script 
  & gt; 
 
   
 
 & lt; / 
 body 
  & gt; 
 
 
 
 & lt; / 
 html 
  & gt; 
 
 
 Và đây là mã JavaScript có liên quan. 
 index.js

  
 Copied! 
 box  = 
  tài liệu 
  class = "phương thức mã thông báo function property-access"> getElementById 
  (
  'hộp' 
 ) 
 ; 
hộp . 
  style 
 . mã thông báo property-access "> vị trí  
 = 
  'tuyệt đối' 
 ; 

 document 
  = "dấu chấm câu"> (
  'nhấp chuột',  
 function 
  handleClick 
  (
  sự kiện 
  {
  hộp . 
  style 
 . mã thông báo property-access "> đầu  
 = 
 event .> clientY 
  - 
  50 
  + 
  'px' 
  ; 
  hộp . 
  style 
 . mã thông báo property-access "> trái  
 = 
 event .> clientX 
  - 
  50 
  + 
  'px' 
  ; 
} 
 ) 
 ;

Nếu bạn mở trình duyệt của mình và nhấp vào các vị trí khác nhau trên màn hình, bạn sẽ thấy rằng phần tử được định vị dưới con trỏ chuột của bạn.

Chúng tôi đã thêm trình xử lý sự kiện click trên đối tượng document , đối tượng này gọi một hoạt động bất cứ khi nào document được nhấp.




 Sau đó, chúng tôi sử dụng đối tượng  event  để lấy tọa độ của chuột khi  event  được gửi đi. 
 < / p> 
 Các yêu cầu của bạn có thể khác nhau, nhưng để đặt phần tử ở giữa

con trỏ, chúng tôi đã trừ  50  khỏi

 clientY 

và

 clientX 

tọa độ. 
 Thuộc tính  clientY  cung cấp tọa độ dọc tại đó sự kiện xảy ra

đã xảy ra. 
 Và thuộc tính  clientX  cung cấp tọa độ ngang tại đó

Đã xảy ra sự kiện  MouseEvent




Xem thêm những thông tin liên quan đến chủ đề js vị trí của phần tử
J2TeamSchool - Javascript ES6 on freecodecamp - day 2




Tác giả: Thanh Xuân
Ngày đăng: 2021-10-18
Đánh giá: 4 ⭐ ( 8696 lượt đánh giá )
Khớp với kết quả tìm kiếm: Học Javascript cơ bản từ freecodecamp

Bài 6: DOM – Xử lý các phần tử HTML trong Javascript

Tác giả: goclamweb.com
Đánh giá: 3 ⭐ ( 4702 lượt đánh giá )
Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu một phần rất quan trọng là DOM - xử lý các phần tử HTML trong Javascript. Qua bài học này, chúng ta sẽ biết các truy xuất, lấy dữ liệu, các thuộc tính từ các thẻ html, cũng như cách thêm, xóa các thẻ html.

Mảng trong JavaScript | JS ARRAY

Tác giả: hanoiict.edu.vn
Đánh giá: 3 ⭐ ( 7194 lượt đánh giá )
Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu về Mảng (Hay còn gọi là Array), cách tạo và thao tác với Mảng trong JavaScript.

Các Phương Thức Array Javascript

Tác giả: www.niemvuilaptrinh.com
Đánh giá: 5 ⭐ ( 9698 lượt đánh giá )
Khớp với kết quả tìm kiếm: Hôm nay bạn hãy cùng mình đi vào tìm hiểu cách sử dụng các phương thức với kiểu dữ liệu array (mảng) trong ngôn ngữ lập trình Javascript để phát triển web nhé.

Hàm indexOf() trong JavaScript

Tác giả: hocjavascript.net
Đánh giá: 4 ⭐ ( 7616 lượt đánh giá )
Khớp với kết quả tìm kiếm: Hàm indexOf() trong JavaScript trả về vị trí của một phần tử trong mảng hoặc chuỗi. Nếu phần tử đó xuất hiện nhiều lần, hàm indexOf() sẽ trả về

Mảng trong JavaScript

Tác giả: laptrinhtudau.com
Đánh giá: 3 ⭐ ( 8580 lượt đánh giá )
Khớp với kết quả tìm kiếm: Mảng trong JavaScript - JS Array - Lập Trình Từ Đầu 1 JavaScript Căn Bản

Truy xuất vị trí (X, Y) của phần tử HTML so với cửa sổ trình duyệt

Tác giả: qastack.vn
Đánh giá: 4 ⭐ ( 5938 lượt đánh giá )
Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cách tiếp cận đúng là sử dụng element.getBoundingClientRect(): var rect = element.getBoundingClientRect(); console.log(rect.top, rect.right, rect.bottom, rect.left);…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình
Xem Thêm  Giải thích độ dài mảng JavaScript - kích thước của mảng tính bằng js