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>