HTML中的DOM（Document Object Model）檔案物件模型允許 JavaScript 改變 HTML元素和CSS樣式，//語法:Object.style.property=new style;其中Object是獲取的元素物件，如通過document.getElementById("id")獲取的元素，
e.g;改變 <div> 元素的樣式，將背景改為藍色、高度60px、顏色白色、大小18px、字體為宋體或雅黑，展示代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>改變HTML樣式</title> 6 </head> 7 <body> 8 <div id="ceshi">《朝花夕拾》原名《舊事重提》，是現代文學家魯迅的散文集，文集以記事為主，飽含著濃烈的抒情氣息，往往又夾以議論，做到了抒情、敘事和議論融為一體，優美和諧，樸實感人，作品富有詩情畫意，又不時穿插著幽默和諷喻；形象生動，格調明朗，有強烈的感染力...</div> 9 <script type="text/javascript"> 10 var myceshi=document.getElementById('ceshi'); 11 myceshi.style.background='#0000FF'; 12 myceshi.style.height='60px'; 13 myceshi.style.color='white'; 14 myceshi.style.fontSize='18px'; 15 myceshi.style.fontFamily='arial microsoft yahei'; 16 // myceshi.innerHTML='哥哥弟弟坡前坐，坡上臥著一只鵝，坡下流著一條河，哥哥說：寬寬的河，弟弟說：白白的鵝，鵝要過河，河要渡鵝，不知是鵝過河，還是河渡鵝哥哥弟弟坡前坐，坡上臥著一只鵝，坡下流著一條河，哥哥說：寬寬的河，弟弟說：白白的鵝，鵝要過河，河要渡鵝，不知是鵝過河，還是河渡鵝，' 17 </script> 18 </body> 19 </html>
代碼中只是一小部分CSS樣式屬性，其它樣式也可以通過該方法設定和修改
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>style樣式</title> 6 </head> 7 <body> 8 <h2 id="con">I love JavaScript</H2> 9 <p> JavaScript使網頁顯示動態效果并實作與用戶互動功能，</p> 10 <script type="text/javascript"> 11 var mychar= document.getElementById("con"); 12 mychar.style.color="red"; 13 mychar.style.backgroundColor="#ccc"; 14 mychar.style.width="300px"; 15 </script> 16 </body> 17 </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/141462.html
標籤：JavaScript
上一篇：用白話講解JS中的繼承核心