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.
var style = document.createElement['style'];
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
var style = document.createElement['style'];
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
var style = document.createElement['style'];
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ử
var style = document.createElement['style'];
Đầ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 các phong cách của mình bằng cách cho
var style = document.createElement['style'];
Hello, world!
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!
Hello, world!
var style = document.createElement['style'];
// 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
var style = document.createElement['style'];
Tuy nhiên, nếu một phong cách áp dụng cho một lớp các yếu tố?
Khi nói đến việc tạo kiểu cho một số nội dung, cách phổ biến nhất là tạo quy tắc kiểu và để bộ chọn của nó nhắm mục tiêu một phần tử hoặc nhiều phần tử. Một quy tắc phong cách sẽ như sau
________số 8Một phần tử sẽ bị ảnh hưởng bởi quy tắc kiểu này có thể trông như thế này
Trên bất kỳ trang web cụ thể nào, chúng ta sẽ thấy ở bất kỳ đâu chỉ từ một vài đến NHIỀU quy tắc kiểu, mỗi quy tắc nối tiếp nhau một cách đẹp mắt để tạo kiểu cho mọi thứ mà chúng ta thấy. Tuy nhiên, đây không phải là cách tiếp cận duy nhất chúng ta có thể sử dụng để định kiểu nội dung bằng CSS. Sẽ không phải là HTML nếu không có nhiều cách để hoàn thành cùng một tác vụ
Bỏ qua các kiểu nội tuyến, cách tiếp cận khác mà chúng ta có thể sử dụng để giới thiệu các yếu tố tốt hơn đó là kiểu CSS liên quan đến JavaScript. Chúng tôi có thể sử dụng JavaScript để trực tiếp đặt kiểu trên một phần tử và chúng tôi cũng có thể sử dụng JavaScript để thêm hoặc xóa các giá trị lớp trên các phần tử sẽ thay đổi quy tắc kiểu nào được áp dụng
Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cả hai cách tiếp cận này
trở đi
Chúa ơi. Một cuốn sách JavaScript của Kirupa?
Để nâng cao kỹ năng JavaScript của bạn ra ngoài vũ trụ, mọi thứ bạn cần để trở thành chuyên gia về JS đều có sẵn ở cả ấn bản bìa mềm và kỹ thuật số
MUA TRÊN AMAZONTại sao chúng ta sẽ đặt kiểu bằng JavaScript?
Trước khi chúng tôi đi xa hơn, có thể hữu ích để giải thích lý do tại sao chúng tôi muốn sử dụng JavaScript để ảnh hưởng đến phong cách của một phần tử ngay từ đầu. Trong các trường hợp phổ biến khi chúng tôi sử dụng quy tắc kiểu hoặc kiểu nội tuyến để ảnh hưởng đến giao diện của một phần tử, kiểu sẽ bắt đầu khi trang được tải. Điều đó thật tuyệt vời, và đó có lẽ là điều chúng tôi luôn muốn
Có nhiều trường hợp, đặc biệt là khi nội dung của chúng tôi trở nên tương tác hơn, khi chúng tôi muốn các kiểu tự động khởi động dựa trên đầu vào của người dùng, một số mã đã chạy trong nền, v.v. Trong các loại tình huống này, mô hình CSS liên quan đến quy tắc kiểu hoặc kiểu nội tuyến sẽ không giúp ích gì cho chúng tôi. Mặc dù bộ chọn giả như hover cung cấp một số hỗ trợ, chúng tôi vẫn bị hạn chế rất nhiều về những gì chúng tôi có thể làm
Giải pháp chúng tôi sẽ cần sử dụng cho tất cả chúng là giải pháp liên quan đến JavaScript. JavaScript không chỉ cho phép chúng ta tạo kiểu cho phần tử mà chúng ta đang tương tác, quan trọng hơn, nó cho phép chúng ta tạo kiểu cho các phần tử trên toàn trang. Sự tự do này rất mạnh mẽ và vượt xa khả năng hạn chế của CSS trong việc định kiểu nội dung bên trong [hoặc rất gần] chính nó
Câu chuyện về hai cách tiếp cận tạo kiểu
Như chúng ta đã thấy trong phần giới thiệu, chúng ta có hai cách để thay đổi kiểu của một phần tử bằng JavaScript. Một cách là đặt thuộc tính CSS trực tiếp trên phần tử. Một cách khác là thêm hoặc xóa các giá trị lớp khỏi một phần tử, điều này có thể dẫn đến một số quy tắc kiểu nhất định được áp dụng hoặc bị bỏ qua. Hãy xem xét cả hai trường hợp này chi tiết hơn
Đặt kiểu trực tiếp
Mọi phần tử HTML mà bạn truy cập qua JavaScript đều có một đối tượng kiểu. Đối tượng này cho phép bạn chỉ định một thuộc tính CSS và đặt giá trị của nó. Ví dụ: đây là cài đặt màu nền của phần tử HTML có giá trị id là siêu nhân trông như thế nào
Hello, world!
Để tác động đến nhiều yếu tố, bạn có thể làm như sau
Hello, world!
Tóm lại, để tạo kiểu trực tiếp cho các phần tử bằng JavaScript, bước đầu tiên là truy cập vào phần tử. Phương thức querySelector tiện dụng của chúng tôi từ trước đó khá hữu ích ở đây. Bước thứ hai chỉ là tìm thuộc tính CSS mà bạn quan tâm và đặt giá trị cho nó. Hãy nhớ rằng, nhiều giá trị trong CSS thực sự là các chuỗi. Ngoài ra, hãy nhớ rằng nhiều giá trị yêu cầu một đơn vị đo lường như px hoặc em hoặc thứ gì đó tương tự để thực sự được công nhận. Cũng nhớ. thực sự, tôi đã quên
Cuối cùng, một số thuộc tính CSS yêu cầu một giá trị phức tạp hơn được cung cấp cùng với một loạt văn bản ngẫu nhiên, theo sau là giá trị mà bạn quan tâm. Một trong những cái phổ biến hơn trong nhóm này là thuộc tính biến đổi. Một cách tiếp cận để đặt giá trị phức tạp là sử dụng phép nối chuỗi kiểu cũ tốt
Hello, world!
Điều đó có thể thực sự gây khó chịu, vì việc theo dõi các dấu ngoặc kép, v.v. là một việc gì đó tẻ nhạt và dễ mắc lỗi. Một giải pháp ít khó chịu hơn là sử dụng cú pháp chuỗi ký tự
Hello, world!
Lưu ý cách tiếp cận này cho phép bạn vẫn cung cấp các giá trị tùy chỉnh trong khi tránh tất cả sự phức tạp của nối chuỗi. Để biết thêm chi tiết về cú pháp chuỗi ký tự, bài viết/video Kết hợp Chuỗi và Biến chính là thứ bạn cần
Vỏ bọc đặc biệt Một số tên thuộc tính CSS
JavaScript rất kén chọn những gì tạo nên một tên thuộc tính hợp lệ. Hầu hết các tên trong CSS sẽ nhận được con dấu phê duyệt của JavaScript, vì vậy bạn có thể sử dụng chúng ngay từ thùng carton. Tuy nhiên, có một số điều cần lưu ý
Để chỉ định một thuộc tính CSS trong JavaScript có chứa dấu gạch ngang, bạn chỉ cần xóa dấu gạch ngang. Ví dụ: background-color trở thành backgroundColor, thuộc tính border-radius chuyển thành borderRadius, v.v.
Ngoài ra, một số từ nhất định trong JavaScript được dành riêng và không thể sử dụng trực tiếp. Một ví dụ về thuộc tính CSS thuộc danh mục đặc biệt này là float. Trong CSS, nó là thuộc tính bố cục. Trong JavaScript, nó là viết tắt của cái gì khác. Để sử dụng thuộc tính có tên hoàn toàn dành riêng, hãy thêm tiền tố css vào thuộc tính trong đó float trở thành cssFloat
Được lấy từ sâu trong não của người có mắt, có một biến thể khác đối với cách tiếp cận trước đây của chúng tôi mà chúng tôi có thể sử dụng để thiết lập kiểu trực tiếp. Nó liên quan đến việc sử dụng Object. giao phó
Hello, world!
Đối với phần tử DOM của chúng tôi được đại diện bởi myElement, các thuộc tính CSS về màu sắc, Kích thước phông chữ và Trọng lượng phông chữ được đặt bằng một thao tác duy nhất. Một cách tiếp cận như thế này là một cách tiết kiệm thời gian rất lớn nếu chúng ta cần đặt nhiều thuộc tính hoặc đang sử dụng các khung như React trong đó một lượng lớn CSS-in-JS là tiêu chuẩn
Thêm và xóa các lớp bằng cách sử dụng
Cách tiếp cận thứ hai liên quan đến việc thêm và xóa các giá trị lớp, từ đó thay đổi các quy tắc kiểu được áp dụng. Ví dụ: giả sử chúng ta có quy tắc kiểu như sau
Hello, world!
Trong HTML, chúng ta có một menu có id là dropDown
Hello, world!
Bây giờ, nếu chúng ta muốn áp dụng. disableMenu cho phần tử này, tất cả những gì chúng ta cần làm là thêm disableMenu làm giá trị lớp cho phần tử dropDown
Hello, world!
Một cách để thực hiện điều này liên quan đến việc đặt thuộc tính className của phần tử, một cách tiếp cận mà chúng ta đã thấy trước đó. Sự cố với className là chúng tôi chịu trách nhiệm duy trì danh sách các giá trị lớp hiện tại được áp dụng. Tệ hơn nữa, danh sách các giá trị của lớp được trả về cho chúng tôi dưới dạng một chuỗi. Nếu chúng tôi có nhiều giá trị lớp mà chúng tôi muốn thêm, xóa hoặc chỉ cần bật/tắt, chúng tôi phải thực hiện một loạt thủ thuật liên quan đến chuỗi dễ bị lỗi mà không thú vị chút nào.
Để giúp giảm bớt một số bất tiện, giờ đây chúng tôi có một API đẹp hơn nhiều giúp việc thêm và xóa các giá trị lớp khỏi một phần tử trở nên dễ dàng một cách kỳ lạ. API mới này được gọi một cách trìu mến là classList và nó cung cấp một số phương thức giúp làm việc với các giá trị của lớp một cách dễ dàng
Bốn phương pháp này làm gì có thể khá dễ hiểu từ tên của chúng, nhưng hãy xem xét chúng chi tiết hơn
Thêm giá trị lớp
Để thêm một giá trị lớp vào một phần tử, hãy lấy một tham chiếu đến phần tử đó và gọi phương thức add trên đó thông qua classList
Sau khi mã này chạy, phần tử div của chúng ta sẽ có các giá trị lớp sau. thanh, foo, zorb, baz. API classList đảm bảo đảm bảo các khoảng trắng được thêm vào giữa các giá trị lớp. Nếu chúng tôi chỉ định một giá trị lớp không hợp lệ, API classList sẽ khiếu nại và không thêm nó. Nếu chúng ta yêu cầu phương thức add thêm một lớp đã tồn tại trên phần tử, mã của chúng ta sẽ vẫn chạy, nhưng giá trị lớp trùng lặp sẽ không được thêm vào
Xóa giá trị lớp
Để xóa một giá trị lớp, chúng ta có thể gọi phương thức xóa trên classList
Sau khi mã này thực thi, giá trị của lớp foo sẽ bị xóa. Những gì chúng ta sẽ còn lại chỉ là thanh, baz và zorb. Khá đơn giản, phải không?
Chuyển đổi giá trị lớp
Đối với nhiều tình huống tạo kiểu, có một quy trình làm việc rất phổ biến. Đầu tiên, chúng tôi kiểm tra xem một giá trị lớp trên một phần tử có tồn tại không. Nếu giá trị tồn tại, chúng tôi xóa nó khỏi phần tử. Nếu giá trị không tồn tại, chúng ta thêm giá trị lớp đó vào phần tử. Để đơn giản hóa mẫu chuyển đổi rất phổ biến này, classList API cung cấp cho bạn phương thức chuyển đổi
Phương thức chuyển đổi, như tên gọi của nó, thêm hoặc xóa giá trị lớp đã chỉ định trên phần tử mỗi khi nó được gọi. Trong trường hợp của chúng tôi, lớp foo bị xóa khi lần đầu tiên phương thức chuyển đổi được gọi. Lần thứ hai, lớp foo được thêm vào. Lần thứ ba, lớp foo bị xóa. Bạn nhận được hình ảnh
Kiểm tra xem giá trị lớp có tồn tại không
Điều cuối cùng chúng ta sẽ xem xét là phương thức chứa
Phương thức này kiểm tra xem giá trị lớp đã chỉ định có tồn tại trên phần tử không. Nếu giá trị tồn tại, bạn nhận được true. Nếu giá trị không tồn tại, bạn nhận được sai
Phần kết luận
Vậy là bạn đã có nó - hai cách tiếp cận dựa trên JavaScript hoàn toàn tốt mà bạn có thể sử dụng để tạo kiểu cho các phần tử của mình. Trong hai lựa chọn này, nếu bạn có khả năng sửa đổi CSS của mình, tôi muốn bạn sử dụng các phần tử tạo kiểu bằng cách thêm và xóa các lớp. Lý do đơn giản là cách tiếp cận này dễ bảo trì hơn nhiều. Việc thêm và xóa các thuộc tính kiểu khỏi quy tắc kiểu trong CSS sẽ dễ dàng hơn nhiều so với việc thêm và xóa các dòng JavaScript