IT狗

JavaScript--Dom操作元素的样式

在前端开发中,有时候需要动态修改的网页元素的样式,这里将使用JS动态修改元素样式的方法做个小结:

网页结构:

按钮:

  标签:input    类型:button     id:btn          value:点我

div:

  标签:div      id:box

使用JS修改网页元素样式有两种方式:

1.使用ClassName

2.使用Style对象

代码如下:

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8"> 5         <title>DOM操作元素的样式</title> 6         <style type="text/css"> 7             .box{ 8                 width: 100px; 9                 height: 100px;10                 background-color: red;11             }12         </style>13     </head>14     <body>15         <input type="button" id="btn" value="点  我" />16         <div id="box"></div>17         18         <!-- 添加JS代码 -->19         <script type="text/javascript">20             //定义函数my$-根据元素id获得页面元素,目的是为了提高效率21             function my$(id){22                 return document.getElementById(id);23             }24             25             // 方法1.根据ClassName修改元素的样式26 //             var btn=my$('btn');27 //             btn.onclick=function(){28 //                 my$('box').className='box';29 //             }30             31             //方法2.根据Style对象修改元素的样式32             var btn=my$('btn');33             btn.onclick=function(){34                 var box=my$('box');35                 box.style.width="100px";36                 box.style.height="100px";37                 box.style.backgroundColor="red";38             }39         </script>40     </body>41 </html>

此文由 IT狗 编辑,本网站所发布展示的作品/文章版权归原作者所有,任何商业用途均须联系作者!

相关推荐

评论 暂无评论