Thay đổi màu văn bản khi di chuột qua bằng JavaScript – javascript di chuột thay đổi màu

Để thay đổi màu văn bản của phần tử khi di chuột qua, hãy thêm sự kiện `mouseover` vào phần tử, thay đổi màu văn bản của phần tử đó khi người dùng di chuột qua phần tử đó. Thêm sự kiện `mouseout` vào phần tử, thay đổi màu văn bản của nó trở lại mặc định khi người dùng di chuyển con trỏ của họ ra ngoài.

Bạn đang xem : thay đổi màu khi di chuột qua javascript

Thay đổi màu văn bản khi Di chuột qua bằng JavaScript #

Để thay đổi màu văn bản của phần tử khi di chuột qua:

  1. Thêm mouseover sự kiện đối với phần tử, thay đổi màu văn bản của phần tử đó khi người dùng
    di chuột qua nó.
  2. Thêm sự kiện mouseout vào phần tử, thay đổi màu văn bản của phần tử đó trở lại
    mặc định khi người dùng di chuyển con trỏ của họ ra ngoài.

Đâ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

"

& gt;

Apple, lê, chuối

& 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

=

tài liệu

.

getElementById

(

'box'

)

;

hộp

.

addEventListener

(

'di chuột qua'

,

chức năng

handleMouseOver

(

)

{

ô

.

style

"toán tử mã thông báo"> =

'red'

;

}

)

;

hộp

.

addEventListener

(

'mouseout'

,

chức năng

handleMouseOut

(

)

{

hộp

.

style

. mã thông báo property-access "> color

=

'black'

;

}

)

;

Chúng tôi đã chọn phần tử bằng phương thức document.getElementById ()
di chuột qua
trình xử lý sự kiện đến phần tử.

Sự kiện mouseover được kích hoạt mỗi khi con trỏ của người dùng được di chuyển vào

Nếu người dùng di chuột qua phần tử, hàm handleMouseOver được gọi màu đỏ .

Chúng tôi cũng đã thêm một
di chuột
trình xử lý sự kiện trên cùng một phần tử.

Sự kiện mouseout được kích hoạt khi con trỏ của người dùng được di chuyển ra khỏi
hoặc một trong các phần tử con của nó.

Khi người dùng di chuyển con trỏ ra ngoài, chúng tôi sẽ thay đổi màu văn bản của phần tử trở lại
black .

Lưu ý rằng bạn có thể sử dụng phương pháp này để thay đổi màu văn bản của bất kỳ phần tử nào trên
di chuột, nó không nhất thiết phải là phần tử mà sự kiện đã được gửi đi -snippet focus: outline-none “>

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

=

margin-bottom

:

100

px

;

margin-top

:

100

px

& gt;

Di chuột qua tôi

& lt; /

div

& gt;

& lt;

div

id

=

text

& gt;

Nội dung văn bản mẫu

& 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

=

tài liệu

.

getElementById

(

'box'

)

;

const

textDiv

=

document

.

getElementById

(

' text '

)

;

hộp

.

addEventListener

(

'di chuột qua'

,

chức năng

handleMouseOver

(

)

{

textDiv

.

style

.

color

=

'red'

;

}

)

;

hộp

.

addEventListener

(

'di chuột ra'

,

chức năng

xử lý textDiv

.

style

.

color

=

'black'

;

}

)

;

Nếu người dùng di chuột qua phần tử div đầu tiên trong ví dụ, màu văn bản
của div thứ hai được đổi thành màu đỏ.

Nếu họ di chuyển con trỏ ra ngoài, màu sẽ được đổi lại thành đen .


Xem thêm những thông tin liên quan đến chủ đề javascript di chuột thay đổi màu

how to change the color of div using java script on click? Div color change with javascript

  • Tác giả: Programming-Code
  • Ngày đăng: 2019-03-11
  • Đánh giá: 4 ⭐ ( 6967 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video you will see how can you easily change the color of div with java script using function so watch this video and programming easily.

    Programming-Code is a place where Students learn coding easily at home and discuss their problems with us and we try to help.
    You can learn through our videos which is available on our YouTube channel which are very helpful for Students and Beginners who start recently Programming.

  • Tác giả: www.homiedev.com
  • Đánh giá: 3 ⭐ ( 3727 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn code chức năng đổi màu nền ngẫu nhiên với JavaScript

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 8763 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Javascript thực chiến nghĩa là thay vì viết những bài về kiến thức cơ bản thì hướng dẫn code chức năng tab, autocomplete,…

Cách đổi màu thẻ bằng Javascript

  • Tác giả: devmaster.edu.vn
  • Đánh giá: 4 ⭐ ( 7489 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Yêu cầu: Tô màu xanh lá và màu đỏ theo số lẻ và số chẵn bằng Javascript, Đào tạo lập trình viên chuyên nghiệp – php – .net – java – android – ios – c – C++,C#, Tư vấn thiết kế và xậy dựng phần mềm, thiết kế website

Code javascript chữ đổi màu liên tục

  • Tác giả: www.thichcongnghe.com
  • Đánh giá: 3 ⭐ ( 8606 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thay đổi màu link khi di chuột vào

  • Tác giả: caodem.com
  • Đánh giá: 5 ⭐ ( 5117 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tổng hợp bài tập JavaScript có code mẫu

  • Tác giả: quantrimang.com
  • Đánh giá: 3 ⭐ ( 6764 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phần đầu sẽ là khoảng 40 bài tập JavaScript có giải mẫu, phía cuối bài viết là những bài tập JavaScript tự giải, những bài khó có kèm theo hướng dẫn, giải thích cụ thể để các bạn không bị ngợp. Hy vọng chủ đề này sẽ hữu ích với các bạn đang tìm hiểu về ngôn ngữ lập trình JavaScript.

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  Bán kính đường viền bảng CSS - bán kính đường viền bảng css