Để thêm một lớp vào phần tử được nhấp, hãy thêm trình xử lý sự kiện `nhấp` trên đối tượng` tài liệu`. Sử dụng thuộc tính `target` trên đối tượng` event` để lấy phần tử được nhấp và sử dụng phương thức `classList.add ()` để thêm một lớp vào phần tử được nhấp.

Bạn đang xem : js thêm loại bỏ lớp khi nhấp vào

Mục lục #

Thêm lớp vào Phần tử được nhấp bằng JavaScript #

Để thêm lớp cho phần tử được nhấp:

  1. Thêm trình xử lý sự kiện nhấp trên đối tượng document .
  2. Sử dụng thuộc tính target trên đối tượng event để lấy phần tử được nhấp.
  3. Sử dụng classList.add () để thêm một lớp vào phần tử.

Đâ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; < / p>

& 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;

style

& gt; < / p>

. bg-yellow

{

background-color

:

màu vàng

;

}

& lt; /

style

& gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

& lt;

div

class

=

"

box1

"

& gt;

Hộp 1

& lt; /

div

& gt;

& lt;

div

class

=

"

box2

"

& gt;

Hộp 2

& lt; /

div

& gt;

& lt;

div

class

=

"

box3

"

& gt;

Hộp 3

& lt; /

div

& gt;

& lt;

script

src

=

"

index.js < p class = "dấu chấm câu"> "

& gt;

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;

Và đây là mã JavaScript có liên quan.

index.js

 

tài liệu

.

addEventListener

(

'nhấp chuột'

,

chức năng

handleClick

(

sự kiện

)

{

sự kiện

.

target

.

classList

.

thêm

(

'bg-yellow'

)

; < / p>

}

)

;

Chúng tôi đã thêm trình xử lý sự kiện click vào đối tượng document , vì vậy bất kỳ lúc nào
phần tử được nhấp, một hàm được gọi.

Chúng tôi đã sử dụng
Thuộc tính target
trên đối tượng event . Thuộc tính target là một tham chiếu đến đối tượng
(phần tử) mà sự kiện đã được thực hiện.

Nói cách khác, event.target cung cấp cho chúng tôi quyền truy cập vào phần tử DOM mà người dùng đã nhấp vào.

Bạn có thể bảng điều khiển. ghi lại thuộc tính target để xem phần tử DOM là
được người dùng nhấp vào.

index.js

 

tài liệu

.

addEventListener

(

'click' < / p>

,

chức năng

handleClick

(

sự kiện

)

{

giao diện điều khiển

.

log

< p class = "dấu chấm câu"> (

'người dùng đã nhấp vào:'

,

sự kiện

.

target

)

;

sự kiện

.

target

.

classList

.

thêm

(

'bg-yellow'

)

; < / p>

}

)

;

Bước cuối cùng là sử dụng
classList.add ()
để thêm một lớp vào phần tử được nhấp.

Nếu lớp đã có trên phần tử được nhấp, nó sẽ không được thêm hai lần.

Bạn có thể chuyển bao nhiêu lớp cho phần tử được nhấp vào () khi cần thiết.

index.js

 

document

.

addEventListener

(

'click'

,

chức năng

handleClick

(

sự kiện

)

{

sự kiện

.

target

. token property-access "> classList

"> (

'bg-yellow'

,

'second-class'

,

'lớp thứ ba'

)

;

}

)

;

Tương tự, nếu bạn cần xóa một hoặc nhiều lớp, bạn có thể sử dụng remove ()
phương thức.

index.js

 

tài liệu

. p >

addEventListener

(

'nhấp chuột'

< p class = "dấu chấm câu">,

chức năng

handleClick

(

sự kiện

)

{

sự kiện

.

target

. token property-access "> classList

"> (

'bg-yellow'

,

'second-class'

,

'lớp thứ ba'

)

;

sự kiện

.

target

. token property-access "> classList

"> (

'second-class'

,

'lớp thứ ba'

)

;

}

)

;

Thêm lớp vào Phần tử đã chọn khi nhấp vào #

Để thêm một lớp vào các phần tử đã chọn khi nhấp:

  1. Chọn một nhóm các phần tử bằng cách sử dụng phương thức document.querySelectorAll () .li>
  2. Sử dụng vòng lặp for ... of để lặp qua tập hợp phần tử thêm
    lớp cụ thể.

Đây là HTML cho ví dụ này. language-html code-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;

style

& gt;

. bg-yellow

{

background-color

:

màu vàng

;

}

& lt; /

style

& gt;

& lt; /

đầu

& gt;

& lt;

body

& gt; < / p>

& lt;

div

class

=

box1

& gt;

Hộp 1

& lt; /

div

& gt;

& lt;

div

class

=

box2

& gt;

Hộp 2

& lt; /

div

& gt;

& lt;

div

class

=

box3

& gt;

Hộp 3

& lt; /

div

& gt;

& lt;

script

src

=

index.js < p class = "dấu chấm câu"> “

& gt;

< p class = "token tag">

& 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

.

querySelectorAll

(

'. box1, .box2, .box3' < / p>

)

;

cho

(

const

box

trong số

hộp

)

{

hộp

.

addEventListener

(

'nhấp chuột'

,

chức năng

xử lý hộp

.

classList

.

thêm

(

'bg-yellow'

)

;

}

)

;

}

Chúng tôi đã sử dụng
document.querySelectorAll
để chọn các phần tử DOM với các lớp box1 , box2 box3 .

Chúng tôi đã sử dụng cho … trong số
vòng lặp để lặp lại tập hợp các phần tử và thêm sự kiện click
xử lý trên từng phần tử.

Khi phần tử cụ thể được nhấp vào, chúng tôi đã sử dụng phương thức add () để thêm một lớp
với nó.


Xem thêm những thông tin liên quan đến chủ đề js thêm loại bỏ lớp khi nhấp vào

Add a READ MORE Hidden-Text Drop-Down in simple JavaScript, HTML and CSS

  • Tác giả: Code with Ania Kubów
  • Ngày đăng: 2020-04-13
  • Đánh giá: 4 ⭐ ( 2527 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Show More Feature in Vanilla JavaScript, HTML and CSS

    A simple ‘show more’ feature that allows the user to show additional information to the user.

    I have kept the styling at a bare minimum for you to go wild and make it your own. Please tag me as I would LOVE to see your game!!!

    Inbuilt JavaScript functions used:
    – addEventListener()
    – querySelectorAll()
    – getElementById()
    – dataset.target
    – innerHTML
    – classList.toggle
    – forEach()
    – Arrow Functions

    ___
    ⭐ New to code and none of this is making sense? Watch my ’12hr+ YouTube Coding Bootcamp’ in which you will learn HMTL,CSS and JavaScript Fundamentals completely from scratch. It’s on my channel and its 100% free.

    ⭐ In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool

    ⭐ You can get a blockchain domain with my affiliate link here: http://bit.ly/get-a-crypto-domain

    ⭐ If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

    ⭐ Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips

    You can also find me on:
    Twitter: https://twitter.com/ania_kubow
    Instagram: https://instagram.com/aniakubow

    codingbootcamp​ coding

Thêm / Xóa phần tử thông qua JS DOM

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 2534 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 cách thao tác thêm / Xóa các phần tử trong JavaScript. (Hay còn gọi là thao tác với DOM)

javascript — Làm thế nào để loại bỏ tất cả các phiên bản của một lớp trong javascript

  • Tác giả: www.it-mot-dan-vi.com
  • Đánh giá: 4 ⭐ ( 1029 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi có lớp này được gọi là .m-active được sử dụng nhiều lần trong suốt HTML của tôi.Về cơ bản những gì tôi muốn làm là xóa tất cả các thể hiện của lớp đó khi người dùng nhấp vào một h…

Tạo Popup và Modal bằng phần tử “dialog” của HTML5

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 3 ⭐ ( 2450 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhiều quá trình trên các trang web ngày nay đòi hỏi sự đồng ý từ người dùng để có thể hoàn tất. Ví dụ, người dùng có thể cần phải loại bỏ một tài khoản, thay đổi tên người dùng của họ hoặc xác…

Kích hoạt sự kiện onblur khi nhấp vào phím enter trong React js

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 3450 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thêm, loại bỏ & chuyển đổi lớp với classList trong JavaScript

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

Làm cách nào để thay đổi lớp của một phần tử bằng JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 1653 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Kỹ thuật HTML5 hiện đại để thay đổi lớp Các trình duyệt hiện đại đã thêm…

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  Lề CSS - làm thế nào để thêm lợi nhuận

By ads_php