您的位置 首页 javascript教程

js开发之动态修改网页元素样式

本篇文章中主要讲述的是JS修改网页元素样式的代码示例,具有一定参考价值,感兴趣的朋友可以了解一下,也希望你看后有所帮助。

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

网页结构:

按钮:

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

p:

  标签:p id:box

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

1.使用ClassName

2.使用Style对象

代码如下:

 <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>DOM操作元素的样式</title>        <style type="text/css">            .box{                width: 100px;                height: 100px;                background-color: red;            }        </style>    </head>    <body>        <input type="button" id="btn" value="点  我" />        <div id="box"></div>                <!-- 添加JS代码 -->        <script type="text/javascript">            //定义函数my$-根据元素id获得页面元素,目的是为了提高效率            function my$(id){                return document.getElementById(id);            }                        // 方法1.根据ClassName修改元素的样式//             var btn=my$('btn');//             btn.onclick=function(){//                 my$('box').className='box';//             }                        //方法2.根据Style对象修改元素的样式            var btn=my$('btn');            btn.onclick=function(){                var box=my$('box');                box.style.width="100px";                box.style.height="100px";                box.style.backgroundColor="red";            }        </script>    </body></html>

相关教程:HTML视频教程

注意:

1.操作样式的时候,使用例样式ClassName还是使用Style对象??

  当设置多个样式属性的时候使用类样式方便

  当设置样式属性比较少的时候,使用Style对象比较方便

2.在使用Style对象的时候,遇见宽、高属性,必须加px单位

3.Style对象属性样式的值是字符串

结果图如图:

相关教程:js视频教程

以上就是js开发之动态修改网页元素样式的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:js开发之动态修改网页元素样式

文章地址:https://www.pyhw.net/34583_js%e5%bc%80%e5%8f%91%e4%b9%8b%e5%8a%a8%e6%80%81%e4%bf%ae%e6%94%b9%e7%bd%91%e9%a1%b5%e5%85%83%e7%b4%a0%e6%a0%b7%e5%bc%8f.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图