จาวาสคริปต์ สามารถเปลี่ยน Css สไตล์ เช่น สี ขนาดตัวอักษร เป็นต้น ขององค์ประกอบโดยใช้วิธีการบางอย่าง เช่น getElementById() , getElementByClassName() เป็นต้น
ในตัวอย่างต่อไปนี้ ลักษณะแบบอักษรและขนาดแบบอักษรขององค์ประกอบได้เปลี่ยนไปโดยใช้ getElementById() วิธีการ
ตัวอย่าง-1
ในตัวอย่างต่อไปนี้ การใช้คำสั่งสไตล์ "style.fontSize " และ "style.fontStyle " ข้อความที่ให้มาจะเปลี่ยนเป็นขนาดฟอนต์ "35px" และรูปแบบฟอนต์เป็น "ตัวเอียง"
<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> ในการรันโค้ดข้างต้น เราจะได้รับข้อมูลต่อไปนี้บนเบราว์เซอร์
หลังจากคลิกปุ่มด้านบน ข้อความแรกจะเปลี่ยนเป็นขนาดตัวอักษร และข้อความที่สองจะเปลี่ยนเป็นรูปแบบตัวอักษร ดังแสดงในผลลัพธ์
ผลลัพธ์
ตัวอย่าง-2
ในตัวอย่างต่อไปนี้ สีของข้อความเปลี่ยนเป็นสีน้ำเงินโดยใช้คำสั่ง 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> หลังจากรันโค้ดด้านบนแล้ว เราจะได้สิ่งต่อไปนี้ในหน้าต่างเบราว์เซอร์
เมื่อคลิกที่ "ระบายสีฉัน " ปุ่ม สีของข้อความที่ให้มาจะถูกเปลี่ยนเป็น 'สีน้ำเงิน ' ตามที่แสดงในผลลัพธ์
ผลลัพธ์
