Đối tượng style trong JavaScript

• Bùi Tấn Lực
• 1022
• 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ờ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

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 *

Đăng ký tư vấn thiết kế website

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn