Bạn có thể thao tác css với javascript không?

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

.batman {
	width: 100px;
	height: 100px;
	background-color: #333;
}

Mộ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

Bạn có thể thao tác css với javascript không?

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 AMAZON

Tạ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ã đang 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

let myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";

Để tác động đến nhiều yếu tố, bạn có thể làm như sau

let myElements = document.querySelectorAll(".bar");

for (let i = 0; i < myElements.length; i++) {
	myElements[i].style.opacity = 0;
}

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

myElement.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";

Đ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ự

myElement.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;

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ó

let color = "red"
let fontSize = "2em"
let fontWeight = "bolder"

Object.assign(myElement.style, {
  color,
  fontSize,
  fontWeight,
});

Đố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

.disableMenu {
	display: none;
}

Trong HTML, chúng ta có một menu có id là dropDown

________số 8

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

________số 8

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ỉ 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 và điều đó không vui 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

0

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

1

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

2

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

3

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

JavaScript có thể sửa đổi CSS không?

JavaScript có thể thay đổi các kiểu Css như màu sắc, cỡ chữ, v.v. của các phần tử sử dụng một số phương thức như getElementById(), getElementByClassName(), v.v. . Trong ví dụ sau, kiểu phông chữ và kích thước phông chữ của các phần tử đã thay đổi bằng cách sử dụng phương thức getElementById().

Làm cách nào để sửa đổi lớp CSS trong JavaScript?

Sửa đổi lớp CSS .
add() được sử dụng để thêm các giá trị lớp
toggle() được sử dụng để bật hoặc tắt một lớp
replace() được sử dụng để thay thế một giá trị lớp bằng một giá trị lớp khác
chứa() được sử dụng để kiểm tra xem một giá trị có tồn tại hay không
remove() được sử dụng để loại bỏ một giá trị lớp

CSS có thể sử dụng JavaScript không?

Có, có thể sử dụng JS trong CSS . ) . Houdini cho phép thời gian phân tích cú pháp nhanh hơn so với sử dụng JavaScript HTMLElement. phong cách để thay đổi phong cách.

Làm cách nào để ghi đè CSS bằng JavaScript?

Trong JavaScript, bạn có thể sử dụng phương thức setAttribute() để xác định thuộc tính cho một phần tử . Sử dụng phương pháp tương tự, bạn có thể ghi đè lên. tính chất quan trọng của một phần tử. Trong ví dụ trên, tôi có một phần tử