Kiểu dáng DOM JavaScript
Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo kiểu cho các phần tử trong JavaScript.
Tạo kiểu cho các phần tử DOM trong JavaScript
Bạn cũng có thể áp dụng kiểu trên các thành phần HTML để thay đổi cách trình bày trực quan của tài liệu HTML một cách linh hoạt bằng cách sử dụng JavaScript. Bạn có thể đặt hầu hết tất cả các kiểu cho các thành phần như phông chữ, màu sắc, lề, đường viền, hình nền, căn chỉnh văn bản, chiều rộng và chiều cao, vị trí, v.v.
Trong phần sau chúng ta sẽ thảo luận về các phương pháp thiết lập kiểu khác nhau trong JavaScript.
Đặt kiểu nội tuyến trên các phần tử
Kiểu nội tuyến được áp dụng trực tiếp cho thành phần HTML cụ thể bằng thuộc tính style. Trong JavaScript, thuộc tính style được sử dụng để lấy hoặc đặt kiểu nội tuyến của một phần tử.
Ví dụ sau sẽ đặt thuộc tính màu sắc và phông chữ của một phần tử có id="intro".
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Set Inline Styles Demo</title>
</head>
<body>
<p id="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
let elem = document.getElementById("intro");
// Appling styles on element
elem.style.color = "blue";
elem.style.fontSize = "18px";
elem.style.fontWeight = "bold";
</script>
</body>
</html>Quy ước đặt tên thuộc tính CSS trong JavaScript
Nhiều thuộc tính CSS, chẳng hạn như font-size, background-image, text-decoration, v.v. chứa dấu gạch nối ( -) trong tên của chúng. Vì trong JavaScript, dấu gạch nối là một toán tử dành riêng và nó được hiểu là dấu trừ, do đó không thể viết một biểu thức, như:elem.style.font-size
Do đó, trong JavaScript, tên thuộc tính CSS chứa một hoặc nhiều dấu gạch ngang sẽ được chuyển đổi thành từ kiểu được viết hoa liên tiếp. Nó được thực hiện bằng cách loại bỏ các dấu gạch nối và viết hoa chữ cái ngay sau mỗi dấu gạch nối, do đó thuộc tính CSS font-size trở thành thuộc tính DOM fontSize, border-left-style trở thành borderLeftStyle, v.v.
Lấy thông tin về phong cách từ các phần tử
Tương tự, bạn nhận được các kiểu được áp dụng trên các phần tử HTML bằng thuộc tính style.
Ví dụ sau sẽ lấy thông tin kiểu từ phần tử có id="intro".
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Get Element's Style Demo</title>
</head>
<body>
<p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
let elem = document.getElementById("intro");
// Getting style information from element
alert(elem.style.color); // Outputs: red
alert(elem.style.fontSize); // Outputs: 20px
alert(elem.style.fontStyle); // Outputs nothing
</script>
</body>
</html>Thuộc tính style không hữu ích lắm khi lấy thông tin kiểu từ các phần tử, vì nó chỉ trả về các quy tắc kiểu được đặt trong thuộc tính style của phần tử chứ không phải các quy tắc đến từ nơi khác, chẳng hạn như quy tắc kiểu trong các biểu định kiểu được nhúng hoặc biểu định kiểu bên ngoài.
Để lấy giá trị của tất cả thuộc tính CSS thực sự được sử dụng để hiển thị một phần tử, bạn có thể sử dụng hàm window.getComputedStyle(), như trong ví dụ sau:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Computed Style Demo</title>
<style type="text/css">
#intro {
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p id="intro" style="color:red; font-size:20px;">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
let elem = document.getElementById("intro");
// Getting computed style information
let styles = window.getComputedStyle(elem);
alert(styles.getPropertyValue("color")); // Outputs: rgb(255, 0, 0)
alert(styles.getPropertyValue("font-size")); // Outputs: 20px
alert(styles.getPropertyValue("font-weight")); // Outputs: 700
alert(styles.getPropertyValue("font-style")); // Outputs: italic
</script>
</body>
</html>Mẹo: Giá trị 700của thuộc tính CSS font-weightgiống với từ khóa bold. Từ khóa color redgiống như rgb(255,0,0), là ký hiệu rgb của một màu.