HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

Thay đổi CSS bằng JavaScript

23 tháng 6 ,2022

Hướng dẫn cách thay đổi CSS bằng JavaScript. Trong JavaScript thì CSS sẽ được thiết lập thông qua thuộc tính Element style và bạn sẽ học cách dùng JavaScript để thay đổi CSS thông qua thay đổi Element style trong bài học này.

Element style là gì

Element style là các định dạng cụ thể của một Element có trong một trang HTML, ví dụ như màu sắc, kiểu font chữ, font size, căn giữa… chẳng hạn, và thường được thiết lâp bằng ngôn ngữ lập trình CSS (chữ viết tắt của Cascading Style Sheets).

Trong HTML, bạn có thể thiết lập style cho các Element bằng cách viết các định dạng CSS chung vào trong thẻ style, hoặc bằng cách thiết lập thuộc tính style cho từng Element cụ thể. Ngoài ra thì bạn cũng có thể tạo file style sheet riêng biệt chứa các thiết lập CSS và tải nó vào bên trong file HTML.

Ví dụ, chúng ta có thể dùng thẻ style và thiết lập CSS chung cho toàn bộ các Element có tag p ở trong file HTML như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ về style CSS</title>

<style type="text/css">
    p{
      color:#ff0000;
      font-size:24px;
    }
</style>

</head>
<body>
<p>Hello</p>
<p>Bye!</p>
</body>
</html>

Trang HTML trên chứa hai thẻ p. Trong thẻ style, kiểu kiểu màu sắc và font size được thiết lập cho toàn bộ thẻ p có trong HTML, nên các thiết lập này sẽ được áp dụng cho cả hai thẻ p trên.

Ví dụ tiếp theo, chúng ta sẽ thiết lập CSS cho từng thẻ p riêng biệt, bằng cách ghi CSS vào thuộc tính style của từng Element này.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ về style CSS</title>

<style type="text/css">
    p{
      color:#ff0000;
      font-size:24px;
    }
</style>

</head>
<body>
<p style="font-weight:bold;">Hello</p>
<p style="color:#0000ff;">Bye!</p>
</body>
</html>

Trong thẻ style có ghi thiết lập CSS bao gồm màu sắc và font size cho toàn bộ thẻ p có trong HTML, nên nó sẽ ảnh hưởng và áp dụng cho cả hai thẻ 　p. Ở thẻ p đầu tiên do có thêm một định dạng khác về độ đậm nhạt nên nó được áp dụng. Và ở thẻ p thứ 2 do có thiết lập riêng biệt về màu sắc, nên thiết lập này sẽ ghi đè thiết lập chung ở thẻ style như sau:

Giống như trên, trong trường hợp có sự thiết lập CSS trùng nhau cho Element thì Element style sẽ được quyết định dựa theo độ ưu tiên của các lệnh thiết lập. Và, style của từng Element sẽ được quyết định bởi cả các thiết lập style chung và thiết lập riêng của style của Element đó.

Thay đổi CSS bằng JavaScript với thuộc tính style

style trong JavaScript là gì

Để thay đổi cũng như thiết lập CSS của một Element bằng JavaScript, chúng ta sẽ sử dụng đến một thuộc tính chuyên dụng là thuộc tính style.

style trong JavaScript là một thuộc tính của Element Object, có tác dụng lấy hoặc thay đổi định dạng CSS của các thuộc tính có trong một Element.

Để thay đổi CSS bằng JavaScript với thuộc tính style, chúng ta sử dụng cú pháp sau đây:

element.style.attributeName = 'value'

Trong đó element là Element cần thay đổi CSS, attributeName là tên thuộc tính cần đặt hoặc thay đổi CSS, và value là định dạng CSS cho Element chỉ định.

Bằng cách sử dụng thuộc tính style, toàn bộ các định dạng CSS ban đầu sẽ bị ghi đè bằng giá trị value, qua đó thay đổi CSS của các Element có trong HTML. Do vậy, đây là phương pháp hữu dụng khi chúng ta muốn thay đổi một Element cụ thể nào đó mà không muốn phải thay đổi các định dạng CSS chung cho tag đại diện của Element đó, và không làm thay đổi CSS của các Element cùng dạng với nó.

Về attributeName thì tên thuộc tính sử dụng khá là tương đồng với tên thuộc tính được sử dụng trong ngôn ngữ CSS. Tuy nhiên cũng có một số khác biệt, ví dụ như thuộc tính float trong CSS sẽ chuyển thành cssFloat trong JavaScript. Bạn có thể tham khảo một số chúng như bảng dưới đây:

CSS	JavaScript
color	color
height	height
font-size	fontSize
text-align	textAlign
float	cssFloat

Ví dụ cụ thể, chúng ta có thể thay đổi định dạng color (màu sắc) của một Element như sau:

let element = document.getElementById('sample');
element.style.color = '#0000ff';

Mã mẫu thay đổi CSS bằng thuộc tính style trong JavaScripts

Hãy cùng xem ví dụ thay đổi CSS bằng JavaScript sau đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ thay đổi CSS bằng JavaScript</title>
<style type="text/css">
p{
  color:#0000ff;
}
</style>
</head>
<body>
<p id="address" style="font-weight:bold;">Thủ đô Hà nội</p>

<button onClick="setElement();">Thay đổi CSS</button>

<script>
function setElement(){
    let element = document.getElementById('address');
    element.style.width = '200px';
    element.style.border = '1px solid orange';
    element.style.color = 'red';
}
</script>
</body>
</html>

Giống như trên, các thuộc tính như width và border vốn chưa được thiết lập giá trị thì đã được thêm vào Element, và thuộc tính color đã được thay đổi, sau khi chúng ta click nút và script của JavaScript được thực thi.

Reset lại CSS bằng JavaScript

Cú pháp

Cũng với phương pháp sử dụng thuộc tính style thì nếu chúng ta đặt giá trị value là null thì giá trị của thuộc tính chỉ định sẽ được reset lại.

Cú pháp chúng ta sử dụng khi này sẽ là :

element.style.attributeName = null

Tuy nhiên lưu ý là phương pháp này chỉ có thể reset các thuộc tính style được thiết lập cho từng Element cụ thể mà thôi. Phương pháp này không thể reset lại CSS được thiết lập trong thẻ style.

Ví dụ cụ thể, chúng ta có thể reset lại định dạng color (màu sắc) của một Element như sau:

let element = document.getElementById('sample');
element.style.color = null;

Mã mẫu

Hãy cùng xem ví dụ reset lại CSS bằng JavaScript sau đây:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ thay đổi CSS bằng JavaScript</title>
<style type="text/css">
p{
  color:#0000ff;
}
</style>
</head>
<body>
<p id="address" style="font-weight:bold;">Thủ đô Hà nội</p>

<button onClick="setElement();">Thay đổi CSS</button>

<script>
function setElement(){
    let element = document.getElementById('address');
    element.style.fontWeight = null;
    element.style.color = null;
}
</script>
</body>
</html>

Ở ví dụ này, thuộc tính fontWeight do được thiết lập trong style của Element có id="address" nên sau khi sử dụng thuộc tính style với giá trị null, nó đã được reset lại và xoá bỏ khỏi Element này.

Tuy nhiên thuộc tính color do được thiết lâp trong tag style, nên nó đã không bị reset lại khi chúng ta sử dụng thuộc tính style với giá trị null.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng thay đổi CSS trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.