Bí kíp lấy và đặt thuộc tính CSS trong jQuery

Bí kíp lấy và đặt thuộc tính CSS trong jQuery

Trong bài học jQuery dưới đây, Mytour sẽ hướng dẫn bí kíp lấy và đặt các thuộc tính CSS trong jQuery. Độc giả cũng có thể tham khảo thêm các bài học khác trên Mytour để hiểu sâu hơn về cách chèn nội dung vào tài liệu HTML bằng jQuery.

1. Phép màu css() trong jQuery

Phép màu css() trong jQuery được sử dụng để rút ra giá trị tính toán của thuộc tính CSS hoặc nghệ thuật đặt một hoặc nhiều thuộc tính CSS cho những phần tử được chọn.

Với công cụ này, chúng ta có thể tạo ra phong cách ngay lập tức cho các phần tử HTML (điều này có nghĩa là kiểu nội tuyến) chưa từng được áp dụng hoặc khó định rõ trong bảng điều khiển stylesheet.

2. Săn lùng giá trị bí ẩn của thuộc tính CSS

Để săn lùng giá trị kỳ diệu của thuộc tính CSS của một phần tử, chúng ta sử dụng tên thuộc tính như một cây săn cho phương thức css().

Cú pháp cơ bản có dạng như bí ẩn dưới đây:

$(selector).css('propertyName');

Ví dụ: Trong ví dụ dưới đây, chúng ta sẽ bắt kịp và trình bày giá trị kỳ diệu của thuộc tính CSS background-color của phần tử div khi chúng ta kích chọn:

Kết quả cuối cùng sẽ thể hiện như sau:

3. Thiết lập thuộc tính và giá trị CSS độc nhất cho các phần tử

Phương thức css() trong jQuery có khả năng sử dụng tên và giá trị của thuộc tính như là một cặp chìa khóa để tạo ra một lời thách thức độc đáo cho các phần tử.

Cách sử dụng cơ bản được thể hiện như sau:

$(selector).css('propertyName', 'value');

Ví dụ: Trong ví dụ dưới đây, chúng ta minh họa cách thiết lập thuộc tính CSS background-color cho các phần tử div với màu đỏ khi chúng ta nhấp chuột chọn:

Kết quả cuối cùng sẽ hiển thị như sau:

4. Tùy chỉnh nhiều thuộc tính và giá trị CSS

Chúng ta có thể sử dụng phương thức css() để thiết lập đồng thời nhiều thuộc tính CSS cho các phần tử.

Cú pháp cơ bản để thiết lập nhiều thuộc tính cho các phần tử như sau:

Ví dụ: Trong ví dụ dưới đây, chúng ta minh họa cách đặt thuộc tính CSS background-color cũng như padding cho nhiều phần tử được chọn cùng một lúc:

Kết quả xuất hiện như sau:

Trong bài học này, Mytour vừa hướng dẫn cách sử dụng phương thức css() trong jQuery để lấy và thiết lập thuộc tính CSS. Tiếp theo, Mytour sẽ chia sẻ cách đặt kích thước cho các phần tử trong jQuery. Nếu bạn có thắc mắc hoặc câu hỏi gì, hãy để lại ý kiến của bạn trong phần bình luận dưới bài viết nhé.