Div变换样式

最新推荐文章于 2021-02-26 23:37:04 发布

sunny_Destiny

最新推荐文章于 2021-02-26 23:37:04 发布

阅读量271

点赞数

本文链接：https://blog.csdn.net/sunny_Destiny/article/details/104492820

版权

Div变换样式

今天我们来学习如何实现将一个div盒子变宽、变高和变绿，我们首先来看一下效果图。

div变换样式

变宽

变高

变绿

接下来我们来分析一下代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div变换样式</title>
        <style>
            #div1{
                width: 200px;
                height: 200px;
                background: red;
                margin-top: 5px;
            }
        </style>
        <script>
            function toWidth()
            {
                var oDiv=document.getElementById('div1');
                oDiv.style.width='400px';
            }
            function toHeight()
            {
                var oDiv=document.getElementById('div1');
                oDiv.style.height='400px';
            }
            function toGreen()
            {
                var oDiv=document.getElementById('div1');
                oDiv.style.background='green';
            }
        </script>
    </head>
    <body>
        <input type="button" value="变宽" onclick="toWidth()"/>
        <input type="button" value="变高" onclick="toHeight()"/>
        <input type="button" value="变绿" onclick="toGreen()"/>
        <div id="div1"></div>
    </body>
</html>

同样地，我们发现中间<script></script>的内容过于繁琐，我们同样采用函数传参的方法，定义两个变量(name,value),将<script></script>的内容改为：

<script>
            function setStyle(name,value)
            {
                var oDiv=document.getElementById('div1');
                oDiv.style[name]=value;
            }
        </script>

相比前面所写的是不是精简了许多，好了，今天的分享就到这里了。
愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞。

小晴天.jpg

sunny_Destiny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Div变换样式

Div变换样式今天我们来学习如何实现将一个div盒子变宽、变高和变绿，我们首先来看一下效果图。div变换样式变宽变高变绿接下来我们来分析一下代码。<!DOCTYPE html><html> <head> <meta charset="UTF-8"&g...
复制链接

扫一扫