js通过Object.style.property=new style;改变html样式
程序员文章站
2022-04-14 16:34:43
HTML中的DOM（Document Object Model）文档对象模型允许 JavaScript 改变 HTML元素和CSS样式，//语法:Object.style.property=new style;其中Object是获取的元素对象，如通过document.getElementById("... ......
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>