利用JavaScript来控制div属性

javascript 2020-03-31 996 次浏览 次点赞

总体思路
通过js来控制css样式实现。本来是做了一个思维导图的,但是实在不想发图片就放弃了。文字叙述吧,此外为了做这个demo还特地把按钮样式给美化了一下,单独开了一篇input样式美化来说。

1.js部分
把style写成一个函数,传参
页面加载完读取函数
获取标签input标签集合
获取改变div的id
建立div改变属性的集合
建立改变值的集合
for循环执行函数
执行onclick事件
传参给写好的gbdiv函数
2.css部分
变宽
width
变高
height
变色
background
变圆
border-radius(此处需要注意,得先在css里面加上规定溢出部分为隐藏overflow:hidden;)
隐藏
dispaly:none
重置
display:block
完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>控制div属性</title>
<style>
.header{
    margin:0 auto;text-align:center;width:800px;padding:0;
    }
#cbox{
    margin:30px auto;width:400px;height:400px;background-color:#55EFC3;display:block;overflow:hidden;
    }
input{
    border-color:aqua;background-color:#D9F2F4;color:#FA9193;font-weight:bolder;font-size:20px; width:100px;height:50px;
    }
</style>
<script type="text/javascript">
//建立一个函数来传参,style对象封装
var gbdiv = function(a, b, c)
{
    a.style[b] = c
};

//载入结束时读取函数
window.onload = function ()
{
    var xBt = document.getElementsByTagName("input");    //获取标签input标签集合,getElementsByTagName() 方法可返回带有指定标签名的对象的集合
    var xDv = document.getElementById("cbox");   //获取id为cbox的div,getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用
    var xB = ["width","height","background","border-radius","display","display"];  //style里想改变属性的集合
    var xC = ["600px","600px","#F20A56","50%","none","block"];     //style里面想改变值的集合

    for (var i = 0; i < xBt.length; i++)
    {
        //for循环之指定input的顺序
        xBt[i].index = i;
        //执行onclick事件
        xBt[i].onclick = function ()
        {
            this.index == xBt.length - 1 && (xDv.style.cssText = "");
            gbdiv(xDv, xB[this.index], xC[this.index]) //传参给封装好的gbdiv函数
        }    
    }
};
</script>
</head>
<body>
<div id="cbox">
</div>
<div class="header">
<input type="button" value="变宽"/>
<input type="button" value="变高"/>
<input type="button" value="变色"/>
<input type="button" value="变圆"/>
<input type="button" value="隐藏"/>
<input type="button" value="重置"/>
</div>
</body>
</html>

本文由 大古 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论