JavaScript có thể thay đổi Css chẳng hạn như màu sắc, kích thước phông chữ, v.v. của các phần tử bằng cách sử dụng một số phương thức như getElementById () , getElementByClassName () vv
Trong ví dụ sau, kiểu phông chữ và kích thước phông chữ của các phần tử đã thay đổi bằng cách sử dụng getElementById () phương pháp.
Ví dụ-1
Trong ví dụ sau, sử dụng lệnh kiểu " style.fontSize "và" style.fontStyle ", các văn bản được cung cấp được thay đổi thành kích thước phông chữ" 35px "và kiểu phông chữ thành" nghiêng "
<html>
<body>
<p id="size">JavaScript can change the style of an HTML element.</p>
<p id="style">JavaScript can change the style of an HTML element.</p>
<button type="button"
onclick="document.getElementById('size').style.fontSize='35px'">Size</button>
<button type="button" onclick="document.getElementById('style')
.style.fontStyle='italic'">Style</button>
</body>
</html> Khi thực thi đoạn mã trên, chúng tôi sẽ nhận được thông tin sau trên trình duyệt.
Sau khi nhấp vào các nút trên, văn bản đầu tiên sẽ được thay đổi thành kích thước phông chữ khác và văn bản thứ hai sẽ được thay đổi thành kiểu phông chữ khác như được hiển thị trong đầu ra.
Đầu ra
Ví dụ-2
Trong ví dụ sau, màu của văn bản đã thay đổi thành màu xanh lam bằng lệnh style "style.color".
<html>
<body>
<p id="color">JavaScript can change the color of an HTML element.</p>
<button type="button" onclick="document.getElementById('color').
style.color='blue'">Color Me</button>
</body>
</html> Sau khi thực hiện đoạn mã trên, chúng ta sẽ nhận được thông báo sau trên cửa sổ trình duyệt.
Khi nhấp vào nút " tô màu cho tôi "màu của văn bản được cung cấp sẽ được đổi thành ' xanh lam 'như được hiển thị trong đầu ra.
Đầu ra
