Đối tượng style trong JavaScript

• Bùi Tấn Lực
• 1076
• 15/09/2025

Chức năng của Đối tượng style trong JavaScript

Đối tượng style trong JavaScript dùng để css cho một phần tử HTML bằng cách khởi tạo thuộc tính và gán giá trị cho thuộc tính đó.

Cú pháp của Đối tượng style trong JavaScript

tenbien.style.thuoctinhcss = "giatricss";

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy, phần tử này dùng để thêm css vào.

thuoctinhcss: Thuộc tính của css cần thêm.

giatricss: Giá trị của thuộc tính css cần thêm.

Code Đối tượng style trong JavaScript

Thiết lập giá trị thuộc tính đối tượng style trong JavaScript

document.getElementById("divid").style.backgroundColor = "black";

<div id="divid">Thẻ DIV cần CSS</div>
<p>Click vào nút THÊM CSS để css cho phần tử HTML</p>
<button onclick="themCss()">THÊM CSS</button>
<script>
function themCss() {
  document.getElementById("divid").style.backgroundColor = "black";
  document.getElementById("divid").style.color = "https://webmoi.vn/doi-tuong-style-trong-javascript/#fff";
  document.getElementById("divid").style.textAlign = "center";
  document.getElementById("divid").style.lineHeight = "50px";
  document.getElementById("divid").style.border = "3px solid red";
  document.getElementById("divid").style.fontWeight = "bold";
  document.getElementById("divid").style.fontSize = "20px";
  document.getElementById("divid").style.textTransform = "uppercase";
}
</script>

Chạy Thử

Lấy giá trị thuộc tính đối tượng style trong JavaScript

<div id="divid">Thẻ DIV cần CSS</div>
<p>Click vào nút THÊM CSS để css cho phần tử HTML, Click vào nút LẤY CSS để lấy giá trị </p>
<button onclick="themCss()">THÊM CSS</button>
<button onclick="layCss()">LẤY CSS</button>
<div id="ketqua"></div>
<script>
function themCss() {
  document.getElementById("divid").style.backgroundColor = "black";
  document.getElementById("divid").style.color = "https://webmoi.vn/doi-tuong-style-trong-javascript/#fff";
  document.getElementById("divid").style.textAlign = "center";
  document.getElementById("divid").style.lineHeight = "50px";
  document.getElementById("divid").style.border = "3px solid red";
  document.getElementById("divid").style.fontWeight = "bold";
  document.getElementById("divid").style.fontSize = "20px";
  document.getElementById("divid").style.textTransform = "uppercase";
}
function layCss() {
  const divid = document.getElementById('divid');
  const ketqua = document.getElementById('ketqua');
  const cssduoclay = window.getComputedStyle(divid);
  const node = document.createElement("p");
  const textnode = document.createTextNode("backgroundColor: "+cssduoclay.backgroundColor);
  node.appendChild(textnode);
  document.getElementById("ketqua").appendChild(node);
  const nodehai = document.createElement("p");
  const textnodehai = document.createTextNode("color: "+cssduoclay.color);
  nodehai.appendChild(textnodehai);
  document.getElementById("ketqua").appendChild(nodehai);
  
}
</script>

Chạy Thử

Lưu ý khi sử dụng đối tượng style trong JavaScript

Đối tượng style rất tiện khi cần điều chỉnh giao diện của một phần tử ngay trong lúc trang web đang hoạt động. Tuy nhiên, nếu thay đổi quá nhiều thuộc tính theo cách này, mã JavaScript có thể trở nên khó quản lý. Vì vậy, nên xác định rõ phần CSS nào cần thay đổi động và phần nào nên được giữ trong stylesheet.

Chỉ thay đổi CSS cần thiết bằng JavaScript

JavaScript phù hợp với những thuộc tính cần thay đổi theo hành động của người dùng hoặc theo trạng thái của ứng dụng. Chẳng hạn, khi người dùng bấm nút, bạn có thể thay đổi màu nền, kích thước hoặc trạng thái hiển thị của một phần tử.

Không nên đưa toàn bộ thiết kế của phần tử vào JavaScript. Các quy tắc giao diện cố định nên được đặt trong CSS để dễ chỉnh sửa và tái sử dụng. JavaScript chỉ nên can thiệp vào những giá trị thực sự cần thay đổi trong quá trình chạy.

const button = document.querySelector("#button");

button.style.backgroundColor = "orange";
button.style.padding = "10px 20px";

Cách này phù hợp khi chỉ có một vài thuộc tính thay đổi. Nếu một trạng thái cần rất nhiều quy tắc CSS, việc quản lý bằng class thường rõ ràng hơn.

Khi nào nên dùng style và khi nào nên dùng classList?

Có thể hiểu đơn giản: style thích hợp khi cần thay đổi trực tiếp một giá trị CSS, còn classList phù hợp khi muốn bật hoặc tắt một nhóm quy tắc giao diện đã được định nghĩa trước.

Ví dụ, thay đổi một giá trị cụ thể như chiều rộng hoặc màu nền có thể dùng style. Ngược lại, với trạng thái như mở menu, nút đang được chọn hoặc hộp thoại đang hiển thị, classList thường dễ bảo trì hơn.

element.style.width = "300px";

element.classList.add("active");
element.classList.remove("active");

Việc tách phần trình bày khỏi logic JavaScript cũng giúp thay đổi giao diện thuận tiện hơn về sau. Khi thiết kế thay đổi, bạn có thể chỉnh CSS mà không phải tìm và sửa nhiều đoạn JavaScript.

Kiểm tra kiểu viết tên thuộc tính CSS trong JavaScript

Khi truy cập thuộc tính CSS thông qua JavaScript, những tên thuộc tính có dấu gạch ngang thường được chuyển sang kiểu camelCase. Đây là điểm dễ gây lỗi đối với người mới sử dụng đối tượng style.

Chẳng hạn, thuộc tính CSS background-color được viết thành backgroundColor trong JavaScript. Tương tự, font-size trở thành fontSize.

element.style.backgroundColor = "black";
element.style.fontSize = "18px";
element.style.marginTop = "20px";

Nếu không nhớ cách chuyển tên thuộc tính, hãy đối chiếu với tên CSS gốc và chuyển phần sau dấu gạch ngang thành chữ hoa. Việc thống nhất cách viết ngay từ đầu sẽ giúp mã dễ đọc và hạn chế lỗi khi thao tác với giao diện.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Đối tượng style trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Đối tượng style trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp