js简单入门，利用css和js简单实现动态修改盒子大小

 今天做的是一个使用js动态调整盒子的大小 

下面是简单的基本页面

点击修改后的菜单栏

鼠标划入后修改样式 

点击确认后 确认样式， 菜单栏收回

 

点击取消后  样式还原到默认样式 菜单栏收回 

 

废话不多说开始上代码，

下面是html的代码

 //大盒子
<div class="box" id="boxdiv">
            //需要修改的盒子
        <div class="son" id="boxson"></div>
        <button class="boxbtn" id="boxbtn">修改</button>
            //隐藏的菜单栏
        <div class="boxbn" id="boxbn">
            <div class="boxnav">
            <h2>大小</h2>
            <input type="button" value="300*300" id="btn1">
            <input type="button" value="200*300" id="btn2"><br>
            <input type="button" value="300*200" id="btn3">
            <input type="button" value="100*300" id="btn4">
            <h2>颜色</h2>
            <input type="button" value="#ff0000" id="btn5">
            <input type="button" value="#00ff00" id="btn6"><br>
            <input type="button" value="#0000ff" id="btn7">
            <input type="button" value="#00ffff" id="btn8"><br>
            <input type="button" value="确定" id="surebtn">
            <input type="button" value="取消" id="overbtn">
        </div>
        </div>
    </div>

 

CSS代码 注释已经标记的很详细了

  <style>
        <!-- 大盒子-->
    .box{
        width: 500px;
        height: 400px;
        border: 1px solid;//边框 1px 实现
        position: relative;//相对定位
    }
        //修改的盒子
    .box .son{
        margin: 30px 0 0 30px; //距离顶部左边距离为30px
        width: 300px;
        height: 100px;
        border: 1px solid;//边框 1px 实现
        display: inline-block;//块级标签改成行内块标签 这样修改按钮就不会换行了
    }
        //修改按钮
    .boxbtn{
        margin: 30px;
    }
        //菜单栏盒子,暂时先隐藏了 下面用js调用
    .boxbn{
        display: none;//display属性为空
        width: 500px;
        height: 400px;
        background: rgba(153, 153, 153, 0.5); //颜色#999 0.5的透明
        position: absolute;//绝对定位
        top: 0;//距离父元素边框距离为0
    }
        //菜单栏盒子内容
    .boxbn .boxnav{
        background: white;//背景为白色
        width: 162px;
        height: 270px;
        padding: 0 15px 20px 10px;
        margin-left: 310px;
    }
        //因为第八个input字母太短 为了和其他盒子对齐 添加了内边距
    #btn8{
        padding: 1px 14px 0 6px ;
    }
        //所有id为btn开头的标签都要被选中
    [id^=btn]{
        background: none;//背景为空
        border: 1px solid;
        font-size: 16px;
        margin: 0px 5px 8px 0;
    }

下面是js代码 上硬菜了 

 <script>
        //点击修改按钮时,把菜单栏的display属性修改成block
    boxbtn.onclick=function(){
        var boxbn = document.getElementById('boxbn');
        boxbn.style.display="block";
    }
        //下面都是菜单栏的选项属性  
          //下面仔细介绍一下onmouseover和onmouseenter/onmouseout和onmouseleave。

            onmouseover和onmouseenter都代表鼠标移入的意思，
            但 onmouseover在有子元素时，移入子元素会被二次触发。onmouseenter只触发一次。

            onmouseout和onmouseleave都有代表鼠标离开的意思
            但两个属性和上面移入一样，前者代表会被二次触发，后者只触发一次 
            建议有时间对比的写一下//


        //这里用的onmouseenter移入属性,该属性只调用一次
            移入时修改boxson的样式//
    btn1.onmouseenter=function(){
        var boxson = document.getElementById('boxson');
        boxson.style.width="300px";
        boxson.style.height="300px";
    }
    btn2.onmouseenter=function(){
        var boxson = document.getElementById('boxson');
        boxson.style.width="200px";
        boxson.style.height="300px";
    }
    btn3.onmouseenter=function(){
        var boxson = document.getElementById('boxson');
        boxson.style.width="300px";
        boxson.style.height="200px";
    }
    btn4.onmouseenter=function(){
        var boxson = document.getElementById('boxson');
        boxson.style.width="100px";
        boxson.style.height="300px";
    }
    btn5.onmouseenter=function(){
        var boxson = document.getElementById('boxson');
        boxson.style.background="#ff0000";
    }
    btn6.onmouseenter=function(){
        var boxson = document.getElementById('boxson');
        boxson.style.background="#00ff00";
    }
    btn7.onmouseenter=function(){
        var boxson = document.getElementById('boxson');
        boxson.style.background="#0000ff";
    }
    btn8.onmouseenter=function(){
        var boxson = document.getElementById('boxson');
        boxson.style.background="#00ffff";
    }
        //点击确定后，菜单栏将变回消失状态隐藏
    surebtn.onclick=function(){
        var boxbn = document.getElementById('boxbn');
        boxbn.style.display="none";
    }
        //点击取消后，菜单栏消失，boxson恢复默认样式
    overbtn.onclick=function(){
        var boxson = document.getElementById('boxson');
        var boxbn = document.getElementById('boxbn');
        boxbn.style.display="none";
        boxson.style.width="300px";
        boxson.style.height="100px";
        boxson.style.background="none";
        
    }
    </script>

今天的内容就到这里，欢迎继续关注