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>