JavaScript之改變樣式
阿新 • • 發佈：2019-01-04
程式碼示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS修改樣式</title> <style type="text/css"> #box{ width: 400px; height: 400px; border:1px solid purple; margin: 30px auto; background: url(img1.jpg) no-repeat; background-size: 400px 400px; } </style> </head> <body> <div id="box">此時不肯低頭,明日何以擡頭</div> </body> </html> <script type="text/javascript"> //獲取相應div區域元素 var box=document.getElementById('box');// JavaScript修改樣式 box.onclick=function(){ box.style.backgroundImage='url(img2.jpg)'; box.style.backgroundSize='90% 90%'; box.style.fontSize='20px'; box.style.color='rgba(255,255,255)'; }; </script>
JavaScript修改樣式的格式,不允許用---符號,例如修改字型大小,一般樣式是font-size,那麼對不起會失效,正確格式是駝峰式
box.style.fontSize='20px';
初始效果:
點選使用JavaScript新增樣式後:
