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

đừng bắt đầu bằng $

Có lẽ mã được cho là một mẫu chữ. ${var} có lẽ?

'height', (100 - $var)+'vh');

Điều đó sẽ không giống như calc() chuyển đổi vh thành pixel để cho phép trừ pixel khỏi nó. Ví dụ đó sẽ chỉ trừ một số thứ từ 100 không giống nhau. ). (Trừ khi tôi vẫn thường nhầm như tôi - hoặc nếu cả hai đơn vị đều là đơn vị vh)

Cảm ơn tất cả mọi người cho đầu vào. Tôi đang cố gắng tạo một mẫu trang có thanh bên nằm ở trên cùng và có chiều cao là 100vh trừ đi chiều cao của tiêu đề là bao nhiêu (để nó chiếm toàn bộ chiều cao của chế độ xem, trừ đi tiêu đề)

Vấn đề là tiêu đề không phải lúc nào cũng có cùng chiều cao

Tiêu đề cao khoảng 180px cho đến khi tiêu đề được cuộn, khi đó tiêu đề nằm trong khoảng từ 55 đến 180px, sau đó là 55px. Đó là bởi vì có tiêu đề "không cuộn" với 2 hàng (cao 180px) và "tiêu đề cuộn xuống" chỉ có một hàng (cao 55px). Sau đó, tất nhiên, ở đâu đó giữa 55px và 180px khi người dùng cuộn xuống

Các biến CSS có quyền truy cập vào DOM, nghĩa là bạn có thể tạo các biến có phạm vi cục bộ hoặc toàn cầu, thay đổi các biến bằng JavaScript và thay đổi các biến dựa trên truy vấn phương tiện

Một cách hay để sử dụng các biến CSS là khi nói đến màu sắc của thiết kế của bạn. Thay vì sao chép và dán nhiều lần các màu giống nhau, bạn có thể đặt chúng vào các biến

cách truyền thống

Ví dụ sau đây cho thấy cách truyền thống để xác định một số màu trong biểu định kiểu (bằng cách xác định màu sẽ sử dụng cho từng thành phần cụ thể)

Ví dụ

cơ thể {màu nền. #1e90ff;

h2 { đường viền dưới. 2px rắn #1e90ff;

thùng đựng hàng {
màu sắc. #1e90ff;
màu nền. #ffffff;
đệm. 15px;
}

cái nút {
màu nền. #ffffff;
màu sắc. #1e90ff;
ranh giới. 1px cố định #1e90ff;
đệm. 5px;
}

Cú pháp của hàm var()

Hàm var() được sử dụng để chèn giá trị của biến CSS

Cú pháp của hàm var() như sau

Ghi chú. Tên biến phải bắt đầu bằng hai dấu gạch ngang (--) và phân biệt chữ hoa chữ thường

Cách hoạt động của var()

đầu tiên. Các biến CSS có thể có phạm vi toàn cầu hoặc cục bộ

Các biến toàn cục có thể được truy cập/sử dụng trong toàn bộ tài liệu, trong khi các biến cục bộ chỉ có thể được sử dụng bên trong bộ chọn nơi nó được khai báo

Để tạo một biến có phạm vi toàn cầu, hãy khai báo nó bên trong bộ chọn :root. Bộ chọn :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?