Phương thức css() trong jQuery

1) Phương thức css() trong jQuery

- Phương thức css() được dùng để:

Thiết lập thuộc tính CSS cho phần tử.
Hoặc trả về "giá trị" của một thuộc tính CSS của phần tử.

2) Cách sử dụng phương thức css() trong jQuery

- Đối với phương thức css(), chúng ta có ba trường hợp sử dụng tương ứng với ba cú pháp:

2.1) Lấy giá trị của một thuộc tính CSS của phần tử

- Dưới đây là cú pháp dùng để lấy giá trị của một thuộc tính CSS của phần tử:

$(selector).css(property);

- Lưu ý: Nếu bộ chọn tìm đường nhiều phần tử trùng khớp thì phương thức css() chỉ trả về giá trị thuộc tính CSS của phần tử trùng khớp được tìm thấy đầu tiên.

2.2) Thiết lập một thuộc tính CSS cho phần tử

- Dưới đây là cú pháp dùng để thiết lập một thuộc tính CSS cho phần tử:

$(selector).css(property,value);

2.3) Thiết lập nhiều thuộc tính CSS cho phần tử

- Dưới đây là cú pháp dùng để thiết lập nhiều thuộc tính CSS cho phần tử:

$(selector).css({
    property:value,
    property:value,
    property:value,
    ....
});

3) Một số ví dụ

Ví dụ:

- Hiển thị giá trị thuộc tính font-size của phần tử <p>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            var value = $("p").css("font-size");
            alert(value);
        });
    });
</script>

Xem ví dụ

Ví dụ:

- Thiết lập thuộc tính font-size với giá trị là 35px cho các phần tử <p>

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").css("font-size","35px");
        });
    });
</script>

Xem ví dụ

Ví dụ:

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $(".info").css({
                "font-size":"50px",
                "color":"crimson",
                "background-color":"yellow",
                "border":"1px solid black",
            });
        });
    });
</script>

Xem ví dụ