Đặ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ử:

  1. Chọn phần tử và đặt thuộc tính vị trí của nó thành tuyệt đối .
  2. 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' .
  3. 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

 

& 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

 

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 left .

top , right , thuộc tính 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

 

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 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:

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

Đây là HTML cho ví dụ tiếp theo.

index.html

 

& 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

 

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

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 Trì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