Lớp CSS ghi đè jQuery

Từ trang trước, chúng ta đã biết rằng 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

Nhìn vào ví dụ từ trang trước

Thí dụ

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

cơ thể người {
màu nền. var(--blue);
}

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

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

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

Tự mình thử »

Đôi khi chúng tôi muốn các biến chỉ thay đổi trong một phần cụ thể của trang

Giả sử chúng ta muốn có một màu xanh lam khác cho các phần tử nút. Sau đó, chúng ta có thể khai báo lại biến --blue bên trong bộ chọn nút. Khi chúng ta sử dụng var(--blue) bên trong bộ chọn này, nó sẽ sử dụng giá trị biến cục bộ --blue được khai báo tại đây

Chúng tôi thấy rằng biến --blue cục bộ sẽ ghi đè biến --blue toàn cầu cho các phần tử nút

Thí dụ

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

cơ thể người {
màu nền. var(--blue);
}

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

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

cái nút {
--màu xanh da trời. #0000ff;
màu nền. var(--white);
màu. var(--blue);
biên giới. 1px solid var(--blue);
đệm. 5px;
}

Tự mình thử »

---

---

Thêm một biến cục bộ mới

Nếu một biến chỉ được sử dụng ở một nơi duy nhất, chúng ta cũng có thể khai báo một biến cục bộ mới, như thế này

Thí dụ

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

cơ thể người {
màu nền. var(--blue);
}

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

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

cái nút {
--button-blue. #0000ff;
màu nền. var(--white);
màu. var(--button-blue);
biên giới. 1px solid var(--button-blue);
đệm. 5px;
}

Tự mình thử »

---

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()

Trong CSS, !important được sử dụng để tăng mức độ ưu tiên của thuộc tính CSS. Điều này bỏ qua các thuộc tính ghi đè

Trong jQuery, bạn có thể sử dụng phương thức css() để thao tác thuộc tính kiểu của bộ chọn nhưng điều này không cho phép đặt !important thành thuộc tính

Ví dụ -

$('#txt').css('width', '100px !important');

Đoạn mã trên không hoạt động khi bạn chạy nó

Trong hướng dẫn này, tôi chỉ cho bạn cách thêm !important vào thuộc tính CSS bằng jQuery

---

nội dung

---

1. Sử dụng ddClass()

Điều này thêm một lớp mới vào phần tử bộ chọn và không thay thế lớp hiện có từ phần tử

Gọi phương thức

$( selector ).addClass( class-name );

2 trên bộ chọn và chỉ định phương thức của bạn là

$( selector ).addClass( class-name );

3 trong phương thức

Cú pháp –

$( selector ).addClass( class-name );

Thí dụ

---

2. Sử dụng attr()

Phương thức này nhận hoặc đặt giá trị của thuộc tính phần tử

5 điều tuyệt vời bạn có thể làm với

Vui lòng bật JavaScript

5 điều tuyệt vời bạn có thể làm với Javascript

Cú pháp –

Nhận giá trị thuộc tính

$( selector ).attr( 'Attribute-name' );

Đặt giá trị thuộc tính

$( selector ).attr( 'Attribute-name', value );

Thí dụ

Sử dụng

$( selector ).addClass( class-name );

4 để chỉnh sửa thuộc tính kiểu phần tử và chỉ định giá trị với !important

________số 8_______

Điều này thêm một thuộc tính mới vào phần tử nếu nó không được chỉ định nếu không thì bỏ qua thuộc tính hiện có

---

3. Sử dụng thuộc tính cssText

Thuộc tính

$( selector ).addClass( class-name );

6 cho phép đặt nhiều kiểu CSS hoặc lấy kiểu CSS của bộ chọn dưới dạng chuỗi

Làm cách nào để ghi đè lên một lớp CSS trong jquery?

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