Javascript thêm kiểu vào phần tử theo lớp

Hôm qua, chúng ta đã xem xét cách lấy các thuộc tính CSS của phần tử bằng vanilla JavaScript. Một điều tôi đã quên đề cập đến.

    Hello, world!

56 chỉ có thể được sử dụng để lấy giá trị, không đặt chúng

Hôm nay, hãy xem cách thiết lập CSS với vanilla JS

Cách tiếp cận 1. Kiểu nội tuyến

Cách dễ nhất để đặt kiểu của phần tử bằng JavaScript là sử dụng thuộc tính

    Hello, world!

57

JavaScript sử dụng kiểu chữ hoa lạc đà thay vì dấu gạch ngang cho tên thuộc tính [bạn có thể xem danh sách đầy đủ các thuộc tính trên MDN], nhưng nếu không thì nó khá đơn giản

var elem = document.querySelector['#some-element'];

// Set color to purple
elem.style.color = 'purple';

// Set the background color to a light gray
elem.style.backgroundColor = '#e5e5e5';

// Set the height to 150px
elem.style.height = '150px';

Thuộc tính

    Hello, world!

57 thêm các kiểu nội tuyến trên phần tử

    Hello, world!

Điều này có thể làm cho đánh dấu của bạn khá lộn xộn, mặc dù. Trình duyệt hiển thị cũng kém hiệu quả hơn

Cách tiếp cận 2. Thêm phong cách toàn cầu

Một cách tiếp cận khác là đưa một phần tử

    Hello, world!

59 với các thuộc tính CSS của bạn vào DOM. Điều này hữu ích khi thiết lập các kiểu nên áp dụng cho một tập hợp các phần tử thay vì chỉ một phần tử duy nhất

Đầu tiên, chúng ta sẽ tạo một yếu tố phong cách

var style = document.createElement['style'];

Tiếp theo, chúng tôi sẽ thêm phong cách của mình bằng cách cung cấp cho

    Hello, world!

57 một

    Hello, world!

0

var style = document.createElement['style'];
style.innerHTML =
	'.some-element {' +
		'color: purple;' +
		'background-color: #e5e5e5;' +
		'height: 150px;' +
	'}';

Cuối cùng, chúng tôi sẽ đưa các kiểu vào DOM. Để làm điều này, chúng tôi sẽ lấy thẻ

    Hello, world!

1 đầu tiên mà chúng tôi tìm thấy trong DOM và sử dụng

    Hello, world!

2 để thêm thẻ

    Hello, world!

57 của chúng tôi trước thẻ đó

// Create our stylesheet
var style = document.createElement['style'];
style.innerHTML =
	'.some-element {' +
		'color: purple;' +
		'background-color: #e5e5e5;' +
		'height: 150px;' +
	'}';

// Get the first script tag
var ref = document.querySelector['script'];

// Insert our new styles before the first script tag
ref.parentNode.insertBefore[style, ref];

Vì vậy, bạn nên sử dụng phương pháp nào?

Tôi sử dụng kết hợp cả hai

Kiểu nội tuyến rất hữu ích khi bạn cần đặt kiểu dành riêng cho mục

Ví dụ: tôi có một tập lệnh chuẩn hóa chiều cao của các phần tử nằm cạnh nhau. Tôi sử dụng

    Hello, world!

57 để đặt chiều cao trực tiếp cho từng phần tử

Tuy nhiên, nếu một phong cách áp dụng cho một lớp các yếu tố?

Trong bài viết này, chúng ta sẽ tìm hiểu cách chúng ta có thể thay đổi kiểu/lớp của một phần tử. Nếu bạn muốn xây dựng một trang web hoặc ứng dụng thú vị thì giao diện người dùng đóng một vai trò quan trọng. Chúng tôi có thể thay đổi, thêm hoặc xóa bất kỳ thuộc tính CSS nào khỏi phần tử HTML khi xảy ra bất kỳ sự kiện nào với sự trợ giúp của JavaScript. Có hai cách tiếp cận cho phép chúng tôi đạt được nhiệm vụ này

Cách tiếp cận 1. Thay đổi CSS với sự trợ giúp của thuộc tính style

cú pháp

________số 8

Example: In this example, we have built a PAN number validator. First, we will take the input value and match it with a regex pattern. If it matches then using JavaScript add an inline style on the

tag. Otherwise, add a different style on the

tag.

HTML

    Hello, world!

64

    Hello, world!

65

    Hello, world!

66

    Hello, world!

67____168

    Hello, world!

69

    Hello, world!

70

document.getElementById["id"].classList

0

    Hello, world!

65

document.getElementById["id"].classList

2

    Hello, world!

70

document.getElementById["id"].classList

4

    Hello, world!

65

document.getElementById["id"].classList

6

document.getElementById["id"].classList

7

    Hello, world!

68

document.getElementById["id"].classList

9

    Hello, world!

70

    Hello, world!

51

    Hello, world!

52

document.getElementById["id"].classList

4

    Hello, world!

54____96

    Hello, world!

70

document.getElementById["id"].classList

0

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

640

    Hello, world!

70

    Hello, world!

51

    Hello, world!

643

    Hello, world!

51____1645

document.getElementById["id"].classList

4

    Hello, world!

54____1640

    Hello, world!

70

document.getElementById["id"].classList

0

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

653

    Hello, world!

654

    Hello, world!

653

    Hello, world!

70

document.getElementById["id"].classList

0

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

660

    Hello, world!

661

    Hello, world!

68

    Hello, world!

663

    Hello, world!

664

    Hello, world!

68

    Hello, world!

666

    Hello, world!

667

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

670

    Hello, world!

671

    Hello, world!

670

    Hello, world!

70

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

676

    Hello, world!

664

    Hello, world!

68

    Hello, world!

679

    Hello, world!

680

    Hello, world!

676

    Hello, world!

70

document.getElementById["id"].classList

0

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

686

    Hello, world!

70

    Hello, world!

51

    Hello, world!

689

    Hello, world!

51

    Hello, world!

691

________ 1692 ________ 1693

    Hello, world!

692

    Hello, world!

695

document.getElementById["id"].classList

0

    Hello, world!

692

    Hello, world!

698

    Hello, world!

692

    Hello, world!

700

    Hello, world!

701

    Hello, world!

702

document.getElementById["id"].classList

0

    Hello, world!

701

    Hello, world!

705

    Hello, world!

701

    Hello, world!

707

    Hello, world!

692

    Hello, world!

709

    Hello, world!

701

document.getElementById["id"].classList

01

document.getElementById["id"].classList

0

    Hello, world!

701

    Hello, world!

705

    Hello, world!

701

document.getElementById["id"].classList

06

    Hello, world!

692

document.getElementById["id"].classList

08

    Hello, world!

51____910

document.getElementById["id"].classList

4

    Hello, world!

54____1686

    Hello, world!

70

_______154____92____170

document.getElementById["id"].classList

0

_______154____166____170

đầu ra

Cách tiếp cận 2. Thay đổi chính lớp – Chúng ta có thể sử dụng hai thuộc tính có thể được sử dụng để thao tác với các lớp

1. Thuộc tính classList. ClassList là thuộc tính chỉ đọc trả về tên lớp CSS của một phần tử dưới dạng đối tượng DOMTokenList.  

cú pháp

document.getElementById["id"].classList

Bạn có thể sử dụng các phương thức được đề cập bên dưới để thêm lớp, xóa lớp và chuyển đổi giữa các lớp khác nhau một cách tương ứng

• Phương thức thêm []. Nó thêm một hoặc nhiều lớp
• Phương thức loại bỏ[]. Nó loại bỏ một hoặc nhiều lớp
• Phương thức chuyển đổi []. Nếu lớp không tồn tại, nó sẽ thêm nó và trả về true. Nó loại bỏ lớp và trả về false. Đối số boolean thứ hai buộc thêm hoặc loại bỏ lớp

Ví dụ

HTML

    Hello, world!

64

    Hello, world!

65

    Hello, world!

66

    Hello, world!

67____168

    Hello, world!

69

    Hello, world!

70

document.getElementById["id"].classList

0

    Hello, world!

65____931

    Hello, world!

70

document.getElementById["id"].classList

4

    Hello, world!

65______97

    Hello, world!

70

    Hello, world!

51____938

    Hello, world!

692

document.getElementById["id"].classList

40

    Hello, world!

51____908

document.getElementById["id"].classList

0

    Hello, world!

51____945

    Hello, world!

692

document.getElementById["id"].classList

47

    Hello, world!

51____908

document.getElementById["id"].classList

4

    Hello, world!

54____97

    Hello, world!

70

    Hello, world!

54____931____170

document.getElementById["id"].classList

0

    Hello, world!

65

document.getElementById["id"].classList

2

    Hello, world!

70

document.getElementById["id"].classList

4

    Hello, world!

65

document.getElementById["id"].classList

6

document.getElementById["id"].classList

7

    Hello, world!

68

document.getElementById["id"].classList

9

    Hello, world!

70

    Hello, world!

51

    Hello, world!

52

document.getElementById["id"].classList

4

    Hello, world!

54____96

    Hello, world!

70

document.getElementById["id"].classList

74

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

640

    Hello, world!

70

    Hello, world!

51

    Hello, world!

643

    Hello, world!

51____1645

document.getElementById["id"].classList

4

    Hello, world!

54____1640

    Hello, world!

70

document.getElementById["id"].classList

74

document.getElementById["id"].classList

4

    Hello, world!

65______990

document.getElementById["id"].classList

91

document.getElementById["id"].classList

90

    Hello, world!

70

document.getElementById["id"].classList

74

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

670

    Hello, world!

70

    Hello, world!

51

    Hello, world!

500

    Hello, world!

51

    Hello, world!

502

    Hello, world!

51

    Hello, world!

504

    Hello, world!

51

    Hello, world!

506

    Hello, world!

51

    Hello, world!

508

    Hello, world!

51

    Hello, world!

510

    Hello, world!

51

    Hello, world!

512

    Hello, world!

51

    Hello, world!

514

document.getElementById["id"].classList

4

    Hello, world!

54____1670

    Hello, world!

70

document.getElementById["id"].classList

74

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

676

    Hello, world!

664

    Hello, world!

68

    Hello, world!

525

    Hello, world!

526

    Hello, world!

676

    Hello, world!

70

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

676

    Hello, world!

664

    Hello, world!

68

    Hello, world!

534

    Hello, world!

535

    Hello, world!

676

    Hello, world!

70

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

676

    Hello, world!

664

    Hello, world!

68

    Hello, world!

543

    Hello, world!

544

    Hello, world!

676

    Hello, world!

70

document.getElementById["id"].classList

0

document.getElementById["id"].classList

4

    Hello, world!

65

    Hello, world!

686

    Hello, world!

70

    Hello, world!

51____1553

    Hello, world!

51____1555

    Hello, world!

51

    Hello, world!

557

document.getElementById["id"].classList

0

    Hello, world!

51

    Hello, world!

695

    Hello, world!

51____1562

    Hello, world!

692

    Hello, world!

564

    Hello, world!

51____910

document.getElementById["id"].classList

0

    Hello, world!

51____1569

    Hello, world!

692

    Hello, world!

571

    Hello, world!

51____910

document.getElementById["id"].classList

0

    Hello, world!

51____1576

    Hello, world!

692

    Hello, world!

578

    Hello, world!

51____910

document.getElementById["id"].classList

4

    Hello, world!

54____1686

    Hello, world!

70

_______154____92____170

document.getElementById["id"].classList

0

_______154____166____170

đầu ra.  

Trong ví dụ trên, chúng ta định nghĩa hai lớp thao tác “hide” và “toggleColor” để ẩn một phần tử và đổi màu thành xanh tương ứng. Khi nhấp vào nút Ẩn, lớp ẩn được thêm vào thẻ “p” để ẩn nó. Khi nhấp vào nút Hiển thị, nó sẽ xóa lớp ẩn hiện tại khỏi thẻ “p”. Khi nhấp vào nút Thay đổi màu, nó sẽ thêm lớp “toggleColor” vào thẻ p [làm cho văn bản có màu xanh lam] và khi được nhấp lại, nó sẽ loại bỏ lớp toggleColor

2. Thuộc tính className. Thuộc tính này được sử dụng để đặt lớp hiện tại của phần tử thành lớp đã chỉ định

Làm cách nào để thêm kiểu trong JavaScript bằng cách sử dụng lớp?

Làm cách nào để thêm kiểu vào phần tử trong JavaScript?

Làm cách nào để thêm kiểu động trong JavaScript?

Làm cách nào để thêm CSS bằng tên lớp trong JavaScript?