Tạo kiểu CSS bằng JS DOM

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

Bạn đang đọc: Tạo kiểu CSS bằng JS DOM

Tóm Tắt

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à trải qua đó, bạn hoàn toàn có thể vận dụng mẫu mã ( CSS ) cho nó .

Đây cũng là cách mà tất cả 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 hoàn toàn có thể vận dụng hầu hết tổng thể những kiểu cho những thành phần trong website như : Phông chữ, sắc tố, lề, viền, hình nền, chỉnh sửa văn bản, chiều rộng và chiều cao, vị trí, v.v.

Ngay trong phần sau tất cả chúng ta sẽ bàn luận về những giải 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 thành phần với id = ‘ intro ‘ .

Thiết lập kiểu nội tuyến bằng JS DOM Đây là một đoạn văn bản thường thì . Đây là một đoạn văn bản khác

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

Sau đó vận dụng kiểu thành phần đó bằng cú pháp như :

.style. = "";

Ở 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ì tất cả 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ừ tiên phong sẽ viết thường hàng loạt
+ Từ tiếp theo trở đi sẽ viết HOA vần âm đầu

Đây là cách tất cả 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 những kiểu được vận dụng trên những 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ừ thành phần có id = ‘ intro ‘ .

Lấy thông tin kiểu bằng JS DOM Đây là một đoạn văn bản thường thì . Đây là một đoạn văn bản khác

Xem thêm: Hướng dẫn chặn cuộc gọi, tin nhắn trên điện thoại đơn giản

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

Nếu kiểu được định nghĩa theo cách được nhúng trong cặp thẻ

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:

JS Get Computed Style Demo Đây là một đoạn văn bản . Đây là một đoạn văn bản khác .

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 hoàn toàn có thể lấy hoặc vận dụng những class CSS cho những thành phần HTML bằng thuộc tính className .

Vì class là một từ dành riêng trong JavaScript, thế cho nên 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 sửa chữa thay thế toàn bộ những class hiện có thành một thành phần div có id = ‘ info ‘ .







Thêm hoặc thay thế class của HTML bằng JS DOM



    
Một thông tin nào đó!

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

+ Muốn sửa chữa thay thế tổng thể class hiện có bằng một class mới, tất cả 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 thi elem.classnam + = ” highlight ” ; thì hiệu quả tất cả chúng ta nhận được là :

+ … class = ” disabled highlight ” …

Ngoài ra, tất cả chúng ta còn nhiều cách để thao tác với những 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 tương hỗ trong tổng thể những trình duyệt chính trừ Internet Explorer trước phiên bản 10. Đây là một ví dụ :

Ví dụ về JS classList

Thông tin gì đấy!

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à vận dụng thuộc tính, class cho thành phần 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!

Xem thêm: mũ trong java – Thánh chiến 3D

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

Source: https://final-blade.com
Category: Kiến thức Internet

admin

final-blade.com