Thêm kiểu phần tử JavaScript

Một trong nhiều cách sử dụng javascript là tạo kiểu động cho tài liệu HTML. Javascript có thể thêm hoặc xóa các thuộc tính CSS cho bất kỳ phần tử nào trực tiếp hoặc bằng cách kích hoạt một số sự kiện

Sử dụng javascript, bạn có thể đặt hầu hết tất cả các thuộc tính CSS cho các thành phần như màu sắc, nền, đường viền, hoạt ảnh, kiểu phông chữ, căn chỉnh văn bản, chiều rộng, chiều cao, phần đệm, vị trí, v.v.

Bạn có thể sử dụng javascript để đặt trực tiếp một kiểu trên một phần tử và bạn cũng có thể sử dụng nó để thêm hoặc xóa các lớp khỏi các phần tử sẽ thêm hoặc xóa một tập hợp kiểu CSS cho phần tử

Lưu ý . CSS phải luôn được ưu tiên cho kiểu dáng của các phần tử. Chỉ trong trường hợp, chúng tôi cần một số hành động động, chúng tôi có thể sử dụng javascript.

Trong hướng dẫn này, bạn sẽ học cách quản lý kiểu dáng của một phần tử bằng javascript

---

Làm cách nào để tạo kiểu cho các phần tử bằng Javascript?

Như chúng ta đã thấy ở trên, có 2 cách tiếp cận khác nhau để thay đổi kiểu của một phần tử bằng javascript

Hãy xem xét cả hai cách này một cách chi tiết

---

1. Kiểu đặt JavaScript

Mọi phần tử trong DOM đều có một đối tượng kiểu

Đối tượng kiểu này cũng là một trong những thuộc tính của phần tử. Thuộc tính style trả về một đối tượng CSSStyleDeclaration, đại diện cho thuộc tính style của phần tử.

Thuộc tính kiểu của một phần tử

Bạn có thể thấy từ hình trên, đối tượng kiểu cung cấp tất cả các thuộc tính CSS mà bạn có thể lấy hoặc đặt bằng đối tượng này

Để thay đổi phong cách của một yếu tố

1. Chọn phần tử, ví dụ - bằng cách sử dụng

   const element = document.getElementById("id1");
   element.style.color = "red";

   5
2. Sử dụng thuộc tính style cho phần tử
3. Sau đó nối thuộc tính CSS với thuộc tính đó và gán giá trị CSS dưới dạng chuỗi

cú pháp

document.getElementById("id1").style.css_property = "value";

Hãy thay đổi màu sắc của một phần tử với "id1" trong ví dụ dưới đây

const element = document.getElementById("id1");
element.style.color = "red";

▶ Chạy mã

Trong ví dụ trên, bạn trực tiếp đặt kiểu mới cho đoạn văn bằng cách sử dụng javascript, nhưng bạn cũng có thể đặt kiểu mới cho bất kỳ thành phần nào khi một sự kiện được kích hoạt. Các sự kiện có thể là bất kỳ thứ gì như tải trang, nhấp vào nút, di chuyển chuột, cuộn trang, v.v.

Hãy xem một ví dụ sử dụng sự kiện nhấp chuột để thay đổi màu của đoạn văn

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

▶ Chạy mã

---

Thay đổi thuộc tính CSS có dấu gạch ngang

Có rất nhiều thuộc tính CSS có dấu gạch nối trong tên của nó, ví dụ như

const element = document.getElementById("id1");
element.style.color = "red";

6,

const element = document.getElementById("id1");
element.style.color = "red";

7,

const element = document.getElementById("id1");
element.style.color = "red";

8, v.v. và javascript đơn giản là không chấp nhận dấu gạch nối trong tên biến, tên hàm hoặc tên thuộc tính

Bây giờ, giả sử bạn muốn đặt

const element = document.getElementById("id1");
element.style.color = "red";

6 bằng javascript, thì bạn phải làm gì?

Để chỉ định thuộc tính CSS như vậy, chỉ cần xóa dấu gạch ngang khỏi tên thuộc tính và chuyển đổi thuộc tính trong trường hợp lạc đà. Ví dụ 'background-color' => backgroundColor

Đây là danh sách thuộc tính CSS có dấu gạch nối và cách sử dụng nó trong javascript

Tên thuộc tính trong CSSToin Javascriptbackground-color=>backgroundColorbackground-image=>backgroundImageborder-bottom=>borderBottomborder-top=>borderTopbox-shadow=>boxShadowfont-size=>fontSizefont-family=>fontFamilyline-height=>lineHeight, v.v.

Hãy xem một số ví dụ

const body = document.body;
body.style.backgroundColor = "teal";

▶ Chạy mã

---

Thêm thuộc tính đường viền vào phần tử

const element = document.getElementById("para");
element.style.border = "3px";
element.style.borderStyle = "Solid";
element.style.borderColor = "blue";

▶ Chạy mã

---

báo cáo quảng cáo này

Trường hợp đặc biệt. Thuộc tính CSS float được sử dụng như cssFloat khi sử dụng với javascript vì . float is a reserved word in javascript.

---

2. Javascript Thêm lớp vào phần tử

Một cách khác để thêm hoặc xóa kiểu CSS khỏi một phần tử là thêm và xóa các lớp CSS khỏi phần tử

Trong JavaScript, chúng ta có các thuộc tính

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

0 và

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

1 để xử lý các lớp

• tên lớp. Nó trả về tất cả các lớp có trong phần tử ở dạng chuỗi
• danh sách lớp học. Nó trả về

  const element = document.getElementById("id1");
  function changeColor(color) {
    element.style.color = color;
  }

  2, chứa nhiều phương thức khác nhau để xử lý các lớp trong một phần tử

Bạn cũng có thể thêm hoặc xóa các lớp bằng cách sử dụng thuộc tính

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

0 nhưng bạn phải thực hiện một loạt thao tác nhỏ giọt với chuỗi trả về, đây không phải là cách thú vị để xử lý các lớp

Nhưng, thuộc tính

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

1 đi kèm với một loạt các phương thức để xử lý các lớp. Dưới đây là một số phương pháp để sửa đổi các lớp

I. thêm lớp trong javascript

Để thêm một giá trị lớp vào một phần tử, hãy sử dụng phương thức

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

5 trên một phần tử thông qua thuộc tính

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

1 của phần tử

Bạn có thể thêm một hoặc nhiều lớp vào phần tử cùng một lúc. Để thêm nhiều lớp, hãy cung cấp tên lớp trong phương thức

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

5 được phân tách bằng dấu phẩy

Thêm một lớp duy nhất vào phần tử

element.classList.add('size');

Thêm nhiều lớp vào phần tử

element.classList.add('padding', 'color');

Đây là một ví dụ làm việc

const element = document.querySelector('p');

function addSize() {
  element.classList.add('size');
}
function addPaddingAndColor() {
  element.classList.add('padding', 'color');
}

▶ Chạy mã

---

II. chuyển đổi lớp trong javascript

Phương thức

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

8 của thuộc tính

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

1 chuyển đổi một giá trị lớp khỏi phần tử có nghĩa là nếu lớp có trong phần tử thì nó sẽ loại bỏ lớp và nếu lớp không có trong phần tử thì nó sẽ thêm lớp vào phần tử

Dưới đây là một ví dụ về chế độ tối và trắng bằng phương pháp chuyển đổi

const element = document.querySelector('body');

function toggleClass() {
  element.classList.toggle('dark');
}

▶ Chạy mã

---

III. xóa lớp trong javascript

Để xóa một lớp khỏi một phần tử, hãy sử dụng phương thức

const body = document.body;
body.style.backgroundColor = "teal";

0 của thuộc tính

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

1

Bạn có thể xóa một hoặc nhiều lớp cùng một lúc khỏi phần tử

Loại bỏ lớp đơn

element.classList.remove('size');

Loại bỏ nhiều lớp

const element = document.getElementById("id1");
element.style.color = "red";

0

Đây là một ví dụ làm việc

const element = document.getElementById("id1");
element.style.color = "red";

1▶ Chạy mã

---

IV. thay thế lớp trong javascript

Để thay thế một lớp bằng một lớp khác trong một phần tử, hãy sử dụng phương thức

const body = document.body;
body.style.backgroundColor = "teal";

2 với API

const element = document.getElementById("id1");
function changeColor(color) {
  element.style.color = color;
}

1

Phương thức thay thế có hai đối số, đối số đầu tiên là lớp cũ và đối số thứ hai là một lớp mới

Thay thế một lớp bằng một lớp khác

const element = document.getElementById("id1");
element.style.color = "red";

2

Đây là một ví dụ làm việc

const element = document.getElementById("id1");
element.style.color = "red";

3▶ Chạy mã

---

Tạo hoạt ảnh bằng Javascript

Sử dụng các thuộc tính kiểu javascript ở trên, chúng ta có thể tạo hoạt ảnh thú vị. Với những giới hạn duy nhất này trong việc tạo hoạt ảnh là trí tưởng tượng của chúng ta

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 CSS trong JavaScript?

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

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