Ghi đè các kiểu CSS bằng cách sử dụng addClass Trong jQuery


Ngô Kim Khánh
4 năm trước
Hữu ích 8 Chia sẻ Viết bình luận 0
Đã xem 4243

Trong bài đăng này, chúng ta sẽ thấy cách chúng ta có thể ghi đè các kiểu CSS bằng cách sử dụng addClassphương thức trong jQuery. Chúng tôi có rất nhiều tùy chọn để thay đổi kiểu của một thành phần cụ thể, chẳng hạn như chỉnh sửa biểu định kiểu theo cách thủ công. Nhưng nếu bạn muốn làm tương tự một cách linh hoạt thì sao? Nếu bạn cần thay đổi động một thuộc tính CSS, tôi khuyên bạn nên đọc cách đây: CSS Quan trọng . Trong bài đăng này, chúng tôi đang áp dụng nhiều quy tắc CSS hơn cho cùng một yếu tố.

Tôi đang sử dụng phiên bản jQuery 2.0.2, bạn có thể sử dụng bất kỳ phiên bản nào bạn thích.

Lý lịch

Gần đây tôi được yêu cầu thay đổi thuộc tính CSS của một phần tử phổ biến cho phần tử. Tôi chỉ muốn thay đổi thuộc tính CSS nếu điều kiện của tôi trở thành đúng. Trong tình huống này, tôi đã sử dụng jQuery addClassđể thực hiện yêu cầu này. 

Sử dụng mã

Điều đầu tiên bạn cần làm là tạo một trang.

<!DOCTYPE html>
<html>
<head>
    <title>AddClass JQuery Demo - Sibeesh Passion</title>
</head>
<body>
   AddClass JQuery Demo - Sibeesh Passion
</body>
</html>

Sau đó, bạn cần bao gồm các kịch bản cần thiết.

<script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>

Tiếp theo bạn cần viết các kịch bản.

<script>
        $(document).ready(function () {
            setTimeout(function () {
$('.first').addClass('second');
}, 5000);
        });

</script>

Khi bạn chạy trình duyệt của mình, bạn có thể thấy đầu ra sau.

Bây giờ sau năm giây, phần tử tương tự sẽ trông như sau.

Nếu bạn nhìn vào bảng điều khiển trình duyệt của mình, bạn có thể thấy cả hai kiểu được áp dụng cho phần tử.


Bây giờ chúng ta có thể thấy mã hoàn chỉnh ở đây.

Tôi đang sử dụng setTimeoutnhư điều kiện của tôi, bạn có thể sử dụng bất kỳ điều kiện theo yêu cầu của bạn.

Mã hoàn chỉnh

<style>
        .first {
            width: 100px;
    height: 100px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            font-style: oblique;
            text-align: center;
background:green;
        }
.second {
            width: 200px;
    height: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            background: blue;
            font-style: oblique;
            text-align: center;
        }
    </style>
Hữu ích 8 Chia sẻ Viết bình luận 0
Đã xem 4243