Thuộc tính phông chữ HTML DOM Style được sử dụng để thiết lập hoặc lấy sáu thuộc tính có tên font-style, font-variant, font-weight, font-size, line-height và font-family. Kích thước phông chữ và họ phông chữ là giá trị thuộc tính bắt buộc và nó có thể đặt mặc định cho tất cả các giá trị bị thiếu khác.
Sau đây là cú pháp để trả về thuộc tính phông chữ -
object.style.font
Đặt thuộc tính phông chữ -
| Giá trị | Mô tả |
|---|---|
| kiểu | Đang thiết lập kiểu phông chữ. |
| biến thể | Xác nhận văn bản bằng phông chữ viết hoa nhỏ. |
| trọng lượng | Xác định sai độ đậm cho phông chữ. |
| kích thước | Xác định sai kích thước phông chữ. |
| lineHeight | Xác định sai khoảng cách giữa các dòng. |
| gia đình | Thiết lập mặt phông chữ. |
| chú thích | Appliesfonts cho các điều khiển phụ đề, ví dụ:nút, trình đơn thả xuống, v.v. |
| biểu tượng | Sai sót về phông chữ biểu tượng nhãn. |
| menu | Phông chữ được sử dụng trong menu |
| hộp thư | Thefont được sử dụng trong hộp thoại |
| chú thích nhỏ | Thefont được sử dụng trong các điều khiển nhỏ |
| thanh trạng thái | Đặt phông chữ thanh trạng thái cửa sổ thành phông chữ hiện tại. |
| tên đầu tiên | Đang xác thực thuộc tính này thành giá trị ban đầu. |
| kế thừa | Kế thừa giá trị thuộc tính mẹ. |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính phông chữ -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.PARA1{
font: oblique 5deg small-caps bold 1.3em/3 cursive;
}
</style>
<script>
function changeFont() {
for(var i=0;i<2;i++){
document.getElementsByClassName("PARA1")[i].style.font="italic bold 30px Verdana ";
}
document.getElementById("Sample").innerHTML="The text in the above two paragraphs is now changed";
}
</script>
</head>
<body>
<p class="PARA1">This is demo text</p>
<p class="PARA1">This is another demo text</p>
<p>Change the above container div flex direction by clicking the below button</p>
<button onclick="changeFont()">Change Font</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi phông chữ Nút ”-
Khi nhấp vào nút “ Thay đổi phông chữ Nút ”-
