JQuery nhận biến CSS

Tuy nhiên, tôi nghĩ rằng vấn đề của bạn có thể giải quyết được bằng cách sử dụng CSS và không có JS nhưng điều đó phụ thuộc vào tình huống. Điều nguy hiểm với việc đặt chiều cao trong JS là bạn cần thực hiện điều đó khi thay đổi kích thước và thu phóng văn bản, v.v. nếu không, chiều cao có thể thay đổi trong quá trình sử dụng, vì vậy đây không phải là cách tốt nhất để thực hiện mặc dù đôi khi có thể cần thiết

:root khớp với phần tử gốc của tài liệu

Để tạo một biến có phạm vi cục bộ, hãy khai báo nó bên trong bộ chọn sẽ sử dụng nó

Ví dụ sau tương tự như ví dụ trên, nhưng ở đây chúng ta sử dụng hàm var()

Đầu tiên, chúng ta khai báo hai biến toàn cục (--blue và --white). Sau đó, chúng ta sử dụng hàm var() để chèn giá trị của các biến sau đó vào biểu định kiểu

Ví dụ

nguồn gốc {
--màu xanh da trời. #1e90ff;
--trắng. #ffffff;
}

cơ thể {màu nền. var(--blue);

h2 { đường viền dưới. 2px solid var(--blue);

thùng đựng hàng {
màu sắc. var(--blue);
màu nền. var(--white);
đệm. 15px;
}

cái nút {
màu nền. var(--white);
màu sắc. var(--blue);
ranh giới. 1px solid var(--blue);
đệm. 5px;
}

Ưu điểm của việc sử dụng var() là

• làm cho mã dễ đọc hơn (dễ hiểu hơn)
• làm cho việc thay đổi các giá trị màu dễ dàng hơn nhiều

Để thay đổi màu trắng xanh thành trắng xanh dịu hơn, bạn chỉ cần thay đổi hai giá trị biến

Ví dụ

nguồn gốc {
--màu xanh da trời. #6495ed;
--trắng. #faf0e6;
}

cơ thể {màu nền. var(--blue);

h2 { đường viền dưới. 2px solid var(--blue);

thùng đựng hàng {
màu sắc. var(--blue);
màu nền. var(--white);
đệm. 15px;
}

cái nút {
màu nền. var(--white);
màu sắc. var(--blue);
ranh giới. 1px solid var(--blue);
đệm. 5px;
}

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng var()

Cách lấy giá trị CSS từ jQuery?

Cách lấy giá trị biến CSS?

Làm cách nào để đặt biến CSS bằng jQuery?

Làm cách nào để nhận giá trị của thuộc tính tùy chỉnh CSS trong JavaScript?