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ử.
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ố
- Chọn phần tử, ví dụ - bằng cách sử dụng
5const element = document.getElementById["id1"]; element.style.color = "red";
- Sử dụng thuộc tính style cho phần tử
- 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ínhBâ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ã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ề
2, chứa nhiều phương thức khác nhau để xử lý các lớp trong một phần tửconst element = document.getElementById["id1"]; function changeColor[color] { element.style.color = color; }
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ớpNhư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ớpI. 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ẩyThê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;
}
1Bạ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;
}
1Phươ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