Một trong những vấn đề phổ biến nhất trong JavaScript là thay đổi lớp của phần tử. Trong đoạn mã này, chúng tôi sẽ chỉ cho bạn những cách hiệu quả để đạt được nó.

Bạn đang xem : gán lớp cho phần tử javascript

Trong hướng dẫn này, bạn sẽ tìm hiểu các cách thay đổi lớp của phần tử bằng JavaScript .

Trong JavaScript, cách tiêu chuẩn để chọn một phần tử là sử dụng document.getElementById (“Id”). Tất nhiên, bạn cũng có thể lấy các phần tử theo những cách khác và trong một số trường hợp, hãy sử dụng này .

Để thay thế tất cả các lớp hiện có bằng một hoặc nhiều lớp, bạn nên đặt thuộc tính className như sau:

  

tài liệu

.getElementById (

"My_Element"

) .className =

"My_Class"

;

Để thêm một lớp vào một phần tử, mà không ảnh hưởng / xóa các giá trị hiện có, bạn nên thêm một khoảng trắng và một tên lớp mới, như sau:

  

tài liệu

.getElementById (

"My_Element"

) .className + =

"My_Class"

;

Đối với xóa một lớp duy nhất cho một phần tử mà không ảnh hưởng đến các lớp tiềm năng khác, cần thay thế biểu thức chính quy , như sau:

  

tài liệu

.getElementById (

"My_Element"

) .className = document.getElementById (

"My_Element"

) .className.replace (/ (?: ^ | \ s) My_Class (?! \ S) / g, '') // Mã được bao bọc để dễ đọc ở trên là

tất cả

một câu lệnh

Giải thích về cụm từ thông dụng này như sau:

  (?: ^ | \ s) # Khớp phần đầu của chuỗi hoặc bất kỳ khoảng trắng nào ký tự MyClass # Văn bản theo nghĩa đen cho tên lớp cần xóa
(?! \ S) # Tìm kiếm phủ định để xác minh ở trên là toàn bộ tên lớp
       # Đảm bảo không có ký tự không phải dấu cách sau
       # (tức là phải ở cuối chuỗi hoặc dấu cách)  

Cờ g lệnh thay thế lặp lại theo yêu cầu nếu tên lớp đã được thêm nhiều lần.

Regex được sử dụng ở trên cũng có thể được áp dụng để kiểm tra xem một lớp cụ thể có tồn tại hay không.

Ví dụ:

  

if

(document.getElementById (

"My_Element"

) .className.match (/ (?: ^ | \ s) MyClass (?! \ S) /))

Mặc dù có thể viết trực tiếp JavaScript trong các thuộc tính sự kiện HTML, (ví dụ: onclick = "this.className + = 'My_Class'"), bạn không được hoan nghênh hành động như vậy. Đặc biệt trên các ứng dụng lớn hơn, mã bền vững hơn đạt được bằng cách tách đánh dấu HTML khỏi logic tương tác JavaScript.

Bước đầu tiên để đạt được điều này là tạo một hàm và gọi hàm đó trong thuộc tính onclick, như sau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

type

=

" text / css "

& gt;

body

{

text-align

: center; }

. oldClassName

{

background-color

: xanh lục; }

. newClassName

{

background-color

: blue; }

. pId

{

margin-top

:

30px

; }

# buttonId

{

padding

:

15px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Đổi tên lớp

& lt; /

h2

& gt;

Nút

& lt;

class

=

" oldClassName "

id

=

" buttonId "

onclick

=

" changeClass () "

& gt;

Nhấp vào Nút

& lt; / Nút

& gt;

& lt;

br

& gt;

& lt;

p

id

=

" pId "

& gt;

Tên lớp cũ: oldClassName

& lt; /

p

& gt ;

& lt;

script

type

=

" text / javascript "

& gt;

function

changeClass

(

)

{

document

.getElementById (

'buttonId'

) .className =

" newClassName "

;

let

button_class =

document

.getElementById (

'buttonId' ). className;

document

.getElementById (

'pId'

) .innerHTML =

" Tên lớp mới: "

+ button_class; }

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Bước thứ hai là chuyển sự kiện onclick ra khỏi HTML và sang JavaScript bằng cách sử dụng addEventListener, như sau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

type

=

" text / css "

& gt;

body

{

text-align

: center; }

. oldClassName

{

background-color

: xanh lục; }

. newClassName

{

background-color

: blue; }

. pId

{

margin-top

:

30px

; }

# buttonId

{

padding

:

15px

; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h2

& gt;

Đổi tên lớp

& lt; / < p class = "hljs-name"> h2

& gt;

Nút

& lt;

class

=

" oldClassName "

id

=

" buttonId "

& gt;

Nhấp vào trên Nút

& lt; /

nút

& gt;

& lt;

br

& gt;

& lt;

p

id

=

" pId "

& gt;

Tên lớp cũ: oldClassName

& lt; /

p

& gt ;

& lt;

script

type

=

" text / javascript "

& gt;

function

changeClass

(

)

{

document

.getElementById (

'buttonId'

) .className =

" newClassName "

;

let

button_class =

document

.getElementById (

'buttonId' ). className;

document

.getElementById (

'pId'

) .innerHTML =

" Tên lớp mới: "

+ button_class; }

window

.onload =

function

(

)

{

document

.getElementById (

"buttonId"

) .addEventListener (

'click'

, changeClass); }

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Bạn cũng có thể thay đổi các lớp bằng cách sử dụng jQuery, như sau:

  $ ('# My_Element'). addClass ('My_Class');
$ ('# My_Element'). RemoveClass ('My_Class');
if ($ ('# My_Element'). hasClass ('My_Class'))  

Ngoài ra, jQuery có thể cung cấp một lối tắt để thêm một lớp, trong trường hợp nó không áp dụng, hãy xóa một lớp học thực hiện nó, như ở đây:

  $ ('# My_Element'). toggleClass ('My_Class');  < / pre> 

Ngoài ra, bạn có tùy chọn chỉ định chức năng cho sự kiện nhấp chuột bằng jQuery, như sau:

  $ ('# My_Element'). click (changeClass);   

hoặc không cần id:

  $ (': button: chứa (Nút)'). click (changeClass);  

Mô tả Cụm từ Thông dụng

Biểu thức chính quy (RegExp) là các mẫu được áp dụng để đối sánh các tổ hợp ký tự trong chuỗi. Chúng cũng được coi là đối tượng trong JavaScript. Chúng được sử dụng cùng với các phương thức thực thi và kiểm tra của RegExp, cũng như các phương thức thay thế, đối sánh, tìm kiếm và phân tách của Chuỗi.

Biểu thức chính quy có bốn cờ tùy chọn có thể được sử dụng độc lập hoặc cùng nhau trong bất kỳ trình tự nào và được bao gồm như một phần của biểu thức chính quy.


Xem thêm những thông tin liên quan đến chủ đề gán lớp cho phần tử javascript

How to add Digital Clock in Blogger using HTML CSS & JavaScript | Digital Clock with Glowing Effect.

  • Tác giả: Tech Vodh
  • Ngày đăng: 2022-06-22
  • Đánh giá: 4 ⭐ ( 2331 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, you can learn how to design a digital clock with date using CSS, HTML, and JavaScript. This digital clock includes Date (Day, Month, Year), Time (Hours, Minutes, Seconds), and Period (AM/PM). The clock is in 12 hours format. Hope you guys enjoy this tutorial.

    Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript

    ▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬
    -:◆ 𝐖𝐚𝐭𝐜𝐡 𝐍𝐞𝐱𝐭 ◆:-
    • Video In Text Effect - https://youtu.be/JIj3m3fPrm4
    • Unlock blogger layout - https://youtu.be/cZBawtgS55Q
    • monetize website without adsense - https://youtu.be/i6aIU-QwibM
    ▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬

    -:◆ Script & Source Code ◆:-
    👉🏻 https://sites.google.com/view/bloginghelp/home

    -:◆ Download Code ◆:-
    👉🏻 https://www.iong.in/2022/06/clock-with-colorful-glowing.html

    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    tech_vodh digital_clock htmlcss

    ▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬
    • Visit Website & Contect Me -
    https://bit.ly/contect-now

    • Follow Facebook Page -
    https://www.facebook.com/techvodh

    • Subscribe Channel -
    https://www.youtube.com/c/TechVodh?sub_confirmation=1
    ▬▬▬▬▬ஜ۩۞۩ஜ▬▬▬▬▬

    • QUERIES SOLVED -
    • Digital Clock with Colorful Glowing Effect using HTML CSS & JavaScript
    • Digital Clock | With Date (Day, Month, Year) - Using HTML, CSS & Javascript
    • Digital Clock with JavaScript
    • Create a Digital Clock Using HTML, CSS, JavaScript in हिन्दी
    • Easy Digital Clock | HTML, CSS & Javascript | Javascript Project
    • Digital Clock in JS | JavaScript Tutorials | Web Development Tutorials
    • Create a Digital Clock using JavaScript | HTML CSS & JS Tutorial

JavaScript Assignment

  • Tác giả: gokisoft.com
  • Đánh giá: 3 ⭐ ( 6528 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các toán tử gán trong(JavaScript Assignment Operators)Các toán tử gán gán các giá trị vào các biến JavaScript.Toán tửví dụGiống với=x = yx = y+=x += yx = x + y-=x -= yx = x - y*=x *= yx = x * y/=x /= yx = x / y%=x %= yx = [...]

JavaScript: Đối tượng Array

  • Tác giả: v1study.com
  • Đánh giá: 4 ⭐ ( 6138 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng Array: Trong JavaScript thì mảng là đối tượng được xây dựng sẵn và có sẵn các thuộc tính và phương thức để thao tác mảng. Lưu ý là một biến thông

Mảng trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 5851 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: các bạn về mảng trong JavaScript. Vậy trước tiên, hãy cùng mình trả lời câu hỏi Mảng là gì? Mảng trong JavaScript như thế nào?

Làm cách nào tôi có thể thêm một lớp vào một phần tử DOM trong JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 5610 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] new_row.className = "aClassName"; Dưới đây là thông tin thêm về MDN: className

Toán tử trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 3 ⭐ ( 3833 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Toán tử trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Cách xáo trộn các phần tử trong một mảng JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 4 ⭐ ( 8978 lượt đánh giá )
  • Khớp với kết quả tìm kiế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àm cách nào để tắt nút radio bằng JavaScript? - tắt tất cả các nút radio

By ads_php