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.
