Hướng dẫn how can javascript interact with css? - javascript có thể tương tác với css như thế nào?

CSS và JavaScript: & NBSP; Các dòng dường như bị mờ bởi mỗi bản phát hành trình duyệt. & nbsp; họ luôn thực hiện một công việc rất khác nhau nhưng cuối cùng, cả hai đều là công nghệ mặt trước nên họ cần phải làm việc chặt chẽ. & nbsp; chúng tôi có các tệp .js của chúng tôi và .css của chúng tôi, nhưng điều đó không có nghĩa là CSS và JS không thể tương tác chặt chẽ hơn so với các khung JavaScript cơ bản sẽ cho phép. & nbsp; Đây là năm cách mà JavaScript và CSS làm việc cùng nhau mà bạn có thể không biết!

Nhận các thuộc tính giả giả với & NBSP; JavaScript

Chúng tôi biết rằng chúng tôi có thể nhận được các giá trị kiểu CSS cơ bản cho một phần tử với thuộc tính style, nhưng còn các thuộc tính giả giả thì sao? & nbsp; Vâng, JavaScript thậm chí cũng có thể truy cập vào những người đó!

// Get the color value of .element:before
var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('content');

Bạn có thể thấy cách tôi truy cập giá trị thuộc tính nội dung trong bài đăng trên blog của tôi về phát hiện trạng thái thiết bị. & nbsp; Vô cùng hữu ích nếu bạn đang tìm cách tạo các trang web năng động, độc đáo!

API danh sách lớp

Tất cả chúng ta đã sử dụng các phương pháp addClass, removeClass và toggleClass trong các thư viện JavaScript yêu thích của chúng tôi. & nbsp; vì mục đích hỗ trợ các trình duyệt cũ hơn, mỗi thư viện sẽ lấy ____99 của phần tử (ở định dạng chuỗi của nó) và thêm/xóa lớp, sau đó cập nhật chuỗi className. & nbsp; Có một API mới hơn để thêm, xóa và chuyển đổi các lớp và nó được gọi là ClassList:

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

Thêm và xóa các quy tắc trực tiếp vào các kiểu dáng

Tất cả chúng ta đều thành thạo trong việc sửa đổi các kiểu thông qua phương thức

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

function addCSSRule(sheet, selector, rules, index) {
	if(sheet.insertRule) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else {
		sheet.addRule(selector, rules, index);
	}
}

// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

Trường hợp sử dụng phổ biến nhất là tạo một bảng kiểu mới, nhưng nếu bạn muốn sửa đổi bảng kiểu hiện có, hãy truy cập nó.

Tải tệp CSS với trình tải

Các tài nguyên tải lười biếng như hình ảnh, JSON và tập lệnh là một cách tuyệt vời để giảm thời gian tải. & nbsp; chúng ta có thể tải các tài nguyên bên ngoài đó với các trình tải JavaScript như curl.js, nhưng bạn có biết bạn có thể lười biếng tải các kiểu dáng và nhận được thông báo đó trong cùng một cuộc gọi lại không?

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// Do something with MyWidget
		// The CSS reference isn't in the signature because we don't care about it;
		// we just care that it is now in the page
	}
});

Blog này lười biếng tải Prismjs, cú pháp highlighter, dựa trên sự hiện diện của & nbsp; ____ 13 yếu tố. & nbsp; Một khi tất cả các tài nguyên được tải, bao gồm cả bảng kiểu, tôi có thể bắn ra một cuộc gọi lại. & nbsp; hữu ích!

CSS myDiv.classList.add('myCssClass'); // Adds a class myDiv.classList.remove('myCssClass'); // Removes a class myDiv.classList.toggle('myCssClass'); // Toggles a class 4

Thuộc tính

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

.disabled { pointer-events: none; }

Nhấp vào phần tử đó và bất kỳ cuộc gọi lại

myDiv.classList.add('myCssClass'); // Adds a class

myDiv.classList.remove('myCssClass'); // Removes a class

myDiv.classList.toggle('myCssClass'); // Toggles a class

Đó chỉ là năm cách mà CSS và JavaScript tương tác mà bạn không luôn nghĩ đến. & nbsp; có nhiều ý tưởng hơn? & nbsp; Hãy chia sẻ chúng!