div属性控制

完成目标：1.改变div宽度 2.改变div宽度 3.改变div背景颜色 4.div隐藏 5.div属性重置。

所用知识点：

1.getElementByTd（），

2.getElementsByTagName（），

3.getAttribute（），

4.setAttribute（）。

设计思路：第一步

获取div id，然后获取button元素存入数组

第二步

设置元素宽度并进行判断增加到某一个值继续按button，div就会收缩。其他内容设计大体相似

第三步

设计重置恢复到div预先设置的值

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>
        控制div属性
    </title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="./dome1.css">
</head>
<body>
    <div>
        <div id="btn">
            <button>宽度改变</button>
            <button>高度改变</button>
            <button>颜色改变</button>
            <button>隐藏</button>
            <button>重置</button>
        </div>

        <div id="div1" width="50px" height="50px">
            <p>
                这是一个盒子
            </p>
        </div>
    </div>

CSS代码：

#btn{
    margin:auto;
    width: 350px;
    margin-bottom: 20px;
}
#div1{

    width: 50px;
    height: 50px;
    border: 1px solid black;
    margin: auto;

}

JS代码：

console.log("success");
var btn1 = document.getElementById("btn") ;
var btn = btn1.getElementsByTagName('button');
var Tdiv = document.getElementById("div1")
//改变宽度
function btn_0(){
    var i=1;
    var j=6;
    btn[0].onclick=function(){
        console.log("success");
        var width = Tdiv.getAttribute("width");
        if(i<=6){
            i++;
            Tdiv.style.width=i*50+"px";
        }else{
            j--;
            Tdiv.style.width=j*50+"px";
            if(j==1){
                i=1;
                j=6;
            }

}

    }
}
btn_0();
//改变高度
function btn_1(){
    var i=1;
    var j=6;
    btn[1].onclick=function(){
        console.log("success")
        var height = Tdiv.getAttribute("height");
        if(i<=6){
            i++;
            Tdiv.style.height=i*50+"px";
        }else{
            j--;
            Tdiv.style.height=j*50+"px";
            if(j==1){
                i=1;
                j=6;
            }
        }
    }
}
var color=[
   "red",
   "yellow",
   "black",
   "gold",
   "peach",
   "blue"
]
console.log(color[0])
btn_1();
//改变颜色
function btn_2(){
    var i=0;
    var j=5;
    btn[2].onclick=function(){
        console.log("success")
        if(i<=5){
            Tdiv.style.backgroundColor=color[i];
            i++;
       }else{
            i=0;
            Tdiv.style.backgroundColor=color[i];
            i++;
       }

}
}
btn_2();

//前三个部分
//后两个部分

//隐藏
btn[3].onclick=function(){
console.log("success")
Tdiv.style.display="none";

}
//重置
btn[4].onclick=function(){
    console.log("success")
    var width = Tdiv.getAttribute("width");
    var height = Tdiv.getAttribute("height");
    Tdiv.style.width=width;
    Tdiv.style.height=height;
    Tdiv.style.display="block";
    Tdiv.style.backgroundColor="white";

}

这是我的代码实现，具体代码效果可以前往我的GitHub，地址：https://github.com/TANGJIE0/Practice_A下载运行查看效果。

参考：这是他人的实现代码仅有js代码：

window.onload = function () {
	var area = document.querySelector(".area");
	var btns = document.querySelectorAll(".btnGroup button");
	var arr = [
	["width", "200px"], // wider
	["height", "200px"], // higher
	["background-color", "red"], // toRed
	["display", "none"], // hideArea
	["display", "block"], // showArea
	["cssText", ""] // resetAres
	];

	btns.forEach(function (ele,i) {
	ele.onclick = function () {
	area.style[arr[i][0]] = arr[i][1];
	}
	});
	} 是不是很不一样呢！哈哈建议自己写加深印象。还有后续....

js原生代码练习 js控制div属性

div属性控制

猜你喜欢