Tạo Kiểu CSS Bằng JS DOM - NIIT - ICT HÀ NỘI

Trang chủ » Chỉnh Css Bằng Js » Tạo Kiểu CSS Bằng JS DOM - NIIT - ICT HÀ NỘI

Có thể bạn quan tâm

Trong bài hướng tự học lập trình JS này, bạn sẽ tìm hiểu cách tạo kiểu CSS cho các phần tử thông qua JS DOM.

Tạo kiểu CSS với JS DOM

Tạo kiểu CSS với JS DOM

Tạo kiểu bằng JavaScript?

Đúng vậy, ngoài cách viết CSS thông thường trong file .css, bạn cũng có thể tạo kiểu CSS bằng cách sử dụng JS DOM.

Bởi vì JS DOM cũng giống như một selector vậy, nó trỏ đến phần tử bạn muốn thao tác.

Và thông qua đó, bạn có thể áp dụng kiểu dáng (CSS) cho nó.

Đây cũng là cách mà chúng ta thường làm khi lập trình web, bởi có nhiều tác vụ bạn cần thay đổi, tạo kiểu CSS mà không được mở file .css.

Bạn có thể áp dụng hầu hết tất cả các kiểu cho các phần tử trong website như: Phông chữ, màu sắc, lề, viền, hình nền, căn chỉnh văn bản, chiều rộng và chiều cao, vị trí, v.v.

Ngay trong phần sau chúng ta sẽ thảo luận về các phương pháp tạo kiểu CSS khác nhau bằng JavaScript.

#1. Thiết lập kiểu nội tuyến cho phần tử thông qua JS DOM

Kiểu nội tuyến được áp dụng trực tiếp cho thành phần HTML cụ thể bằng thuộc tính style.

Trong JavaScript, thuộc tính style được sử dụng để lấy hoặc đặt kiểu nội tuyến của một phần tử.

Ví dụ sau sẽ đặt thuộc tính màu và phông chữ của một phần tử với id = 'intro'.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Thiết lập kiểu nội tuyến bằng JS DOM</title> </head> <body> <p id="intro">Đây là một đoạn văn bản thông thường.</p> <p>Đây là một đoạn văn bản khác</p> <script> // Đầu tiên, hãy trỏ đến phần tử // Cần tạo kiểu var elem = document.getElementById("intro"); // Áp dụng kiểu cho phần tử elem.style.color = "blue"; elem.style.fontSize = "18px"; elem.style.fontWeight = "bold"; </script> </body> </html>

Trong ví dụ trên bạn đã thấy, chúng ta sử dụng JS DOM để trỏ đến phần từ cần tạo kiểu.

Sau đó áp dụng kiểu phần tử đó bằng cú pháp như:

<JS DOM>.style.<Thuộc tính cần CSS> = "<Giá trị>";

Ở trong CSS, bạn thường thấy thuộc tính viết như thế này, ví dụ:

+ font-size

+ font-weight

+ border-left-style

Nhưng khi sử dụng JS DOM để thao tác thì chúng ta sẽ viết tên thuộc tính kiểu camel case (Kiểu con lạc đà), có nghĩa là:

+ Từ đầu tiên sẽ viết thường toàn bộ

+ Từ tiếp theo trở đi sẽ viết HOA chữ cái đầu

Đây là cách chúng ta sẽ viết thuộc tính trong khi sử dụng JS DOM:

+ fontSize

+ fontWeight

+ borderLeftStyle

+ ...

#2. Lấy thông tin kiểu của các phần tử bằng JS DOM

Tương tự, bạn có được các kiểu được áp dụng trên các thành phần HTML bằng cách sử dụng thuộc tính kiểu.

Ví dụ sau sẽ lấy thông tin kiểu từ phần tử có id = 'intro'.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Lấy thông tin kiểu bằng JS DOM</title> </head> <body> <p id="intro" style="color:blue; font-size:20px;">Đây là một đoạn văn bản thông thường.</p> <p>Đây là một đoạn văn bản khác</p> <script> // Đầu tiên, hãy trỏ đến phần tử // Cần lấy thông tin kiểu var elem = document.getElementById("intro"); // In thông tin kiểu ra màn hình console console.log(elem.style.color); // blue console.log(elem.style.fontSize); // 20px console.log(elem.style.fontWeight); // Không có gì </script> </body> </html>

Thuộc tính style không hữu ích lắm khi lấy thông tin kiểu từ các phần tử, vì nó chỉ trả về các quy tắc kiểu nội tuyến của phần tử.

Nếu kiểu được định nghĩa theo cách được nhúng trong cặp thẻ <style></style> hoặc file css bên ngoài thì nó không lấy được.

Do đó,

Để lấy các giá trị của tất cả các thuộc tính CSS thực sự được sử dụng để kết xuất một phần tử, bạn có thể sử dụng phương thức window.getComputingStyle(), như trong ví dụ sau:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Get Computed Style Demo</title> <style type="text/css"> #intro { font-weight: bold; font-style: italic; } </style> </head> <body> <p id="intro" style="color:red; font-size:20px;">Đây là một đoạn văn bản.</p> <p>Đây là một đoạn văn bản khác.</p> <script> // Chọn đến phần tử var elem = document.getElementById("intro"); // Lấy tất cả thông tin kiểu var styles = window.getComputedStyle(elem); // In thông tin kiểu ra màn hình console console.log(styles.getPropertyValue("color")); // rgb(255, 0, 0) console.log(styles.getPropertyValue("font-size")); // 20px console.log(styles.getPropertyValue("font-weight")); // 700 console.log(styles.getPropertyValue("font-style")); // italic </script> </body> </html>

Lưu ý: Giá trị 700 cho trọng số phông chữ thuộc tính CSS giống như từ khóa bold. Từ khóa red là rgb(255,0,0)

Đó là cách lấy thông tin thuộc tính, ngược lại, để thêm thuộc tính bạn có thể tham khảo trên Mozilla.

#3. Thêm class cho phần từ bằng JS DOM

Bạn cũng có thể lấy hoặc áp dụng các class CSS cho các phần tử HTML bằng thuộc tính className.

Vì class là một từ dành riêng trong JavaScript, vì vậy JavaScript sử dụng thuộc tính className để chỉ giá trị của thuộc tính class của HTML.

Ví dụ sau sẽ chỉ ra cách thêm một lớp mới hoặc thay thế tất cả các class hiện có thành một phần tử div có id = 'info'.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Thêm hoặc thay thế class của HTML bằng JS DOM</title> <style> .highlight { background: yellow; } </style> </head> <body> <div id="info" class="disabled">Một thông tin nào đó!</div> <script> // Chọn đến phần tử var elem = document.getElementById("info"); // Thêm hoặc thay thế tất cả class bằng class note elem.className = "note"; // Thêm vào một class mới là class highlight elem.className += " highlight"; </script> </body> </html>

Bạn có thể hiểu cách làm này như là thay thế, nối chuỗi trong JavaScript

+ Muốn thay thế tất cả class hiện có bằng một class mới, chúng ta sử dụng toán tử "="

+ Muốn thêm class mới vào thì sử dụng toán tử "+="

Ví dụ, class hiện có là class="disabled"

Sau khi thực hiện elem.classnam += " highlight"; thì kết quả chúng ta nhận được là:

+... class="disabled highlight" ...

Ngoài ra, chúng ta còn nhiều cách để thao tác với các class CSS bằng JS DOM.

Bạn có thể sử dụng thuộc tính classList để lấy, đặt hoặc xóa các class CSS dễ dàng khỏi một phần tử.

Thuộc tính này được hỗ trợ trong tất cả các trình duyệt chính trừ Internet Explorer trước phiên bản 10. Đây là một ví dụ:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ví dụ về JS classList</title> <style> .highlight { background: yellow; } </style> </head> <body> <div id="info" class="disabled">Thông tin gì đấy!</div> <script> // Chọn đến phần tử cần thao tác var elem = document.getElementById("info"); // Thêm mới một class elem.classList.add("hide"); // Thêm nhiều classs elem.classList.add("note", "highlight"); // Loại bỏ một class nào đó elem.classList.remove("hide"); // Loại bỏ nhiều class elem.classList.remove("disabled", "note"); // Nếu class tồn tại thì loại bỏ nó // Nếu class chưa tồn tại thì thêm nó elem.classList.toggle("visible"); // Kiểm tra xem class có tồn tại hay không if(elem.classList.contains("highlight")) { alert("Phần tử có đã có class được chỉ định."); } </script> </body> </html>

Như vậy là qua bài hướng dẫn này mình đã giúp bạn biết cách thiết lập kiểu nội tuyến cũng như cách lấy, và áp dụng thuộc tính, class cho phần tử bằng JS DOM.

Hi vọng bài hướng dẫn sẽ giúp bạn học JS tốt hơn.

>> Muốn học Lập trình Web bài bản thì tham khảo ngay KHÓA HỌC LẬP TRÌNH FULL STACK tại NIIT - ICT Hà Nội.

Chúc bạn thành công!

>> Đọc thêm: DOM Selector trong JavaScript

Từ khóa » Chỉnh Css Bằng Js