Thay đổi thuộc tính CSS bằng jQuery

Với jQuery bạn cũng có thể thêm CSS cho một phần tử nào đó. Đây là một trong những phương phức cũng khá thú vị. Bạn đang tìm hiểu về cách làm thế nào để thêm CSS bằng jQuery hãy tham khảo bài viết này.

Thêm CSS vào HTML bằng jQuery

Cú pháp:

.css("thuộc tính","giá trị");

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("color", "blue");
});
});
</script>
</head>
<body>

<p>Đây là đoạn văn bản </p>

<button>Thay đổi màu văn bản</button>

</body>
</html>

Khi nhấp vào Button đoạn văn bản sẽ thay đổi sang màu xanh dương.

Vậy nếu muốn đặt nhiều thuộc tính CSS thì làm sao?

Cú pháp:

css({"thuộc tính":"giá trị","thuộc tính":"giá trị",...});

Ví dụ:

<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background": "green", "font-size": "20px", "color":"#fff"});
});
});
</script>
<button>Nhấp vào đây</button>
<p style="background-color:#ff0000">Đây là đoạn văn bản 1</p>
<p style="background-color:#00ff00">Đây là đoạn văn bản 2</p>
<p style="background-color:#0000ff">Đây là đoạn văn bản 3</p>

Kết luận: Áp dụng những ví dụ trên bạn sẽ dễ dàng thêm và thay đổi giá trị của một CSS trước đó. Với kiến thức này bạn có thể áp dụng để thực hành ngay trên blog của mình.

Hãy để lại bình luận:

Mình rất vui khi bạn đã để lại một bình luận. Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *