zoukankan      html  css  js  c++  java
  • 第4天:js入门给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高、背景色。一点点都是进步。核心代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JS入门_设置div宽、高、背景色</title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    h2{
    float: left;
    }
    #span1{
    100px;
    height:40px;
    background: red;
    text-align: center;
    line-height: 40px;
    display: inline-block;

    }
    #box{
    100px;
    height:100px;
    border: 2px solid #000;
    }
    #con{
    300px;
    height:200px;
    background: #fff;
    border: 10px solid #d2d2d2;
    margin: 0 auto;
    padding: 20px;
    display: none;
    position: fixed;
    top: 300px;
    right:300px;
    z-index: 2;
    }
    #red,#yellow,#blue,#width1,#width2,#width3,#height1,#height2,#height3{
    display:inline-block;
    36px;
    height:33px;
    text-align: center;
    line-height: 33px;
    margin: 5px;
    }
    #width1,#width2,#width3,#height1,#height2,#height3{
    background: #f1f1f1;
    border: 1px solid #000;

    }
    #red{
    background: red;
    }
    #yellow{
    background: yellow;
    }
    #blue{
    background: blue;
    }
    .btn1,.btn2{
    60px;
    height:30px;
    color: #fff;
    background: blue;
    border:1px solid #02f;
    border-radius: 2px;
    margin: 10px;
    }
    </style>
    <script>
    window.onload=function(){
    oBody=document.getElementById('body');
    oSpan1=document.getElementById('span1');
    oCon=document.getElementById('con');
    oBox=document.getElementById('box');
    oRed=document.getElementById('red');
    oYellow=document.getElementById('yellow');
    oBlue=document.getElementById('blue');
    oWidth1=document.getElementById('width1');
    oWidth2=document.getElementById('width2');
    oWidth3=document.getElementById('width3');
    oHeight1=document.getElementById('height1');
    oHeight2=document.getElementById('height2');
    oHeight3=document.getElementById('height3');
    oSpan1.onclick=function(){
    oCon.style.display='block';
    oBody.style.background='#c1c1c1';

    }

    oRed.onclick=function(){
    box.style.background='red';
    }
    oYellow.onclick=function(){
    box.style.background='yellow';
    }
    oBlue.onclick=function(){
    box.style.background='blue';
    }
    oWidth1.onclick=function(){
    box.style.width='200px';
    }
    oWidth2.onclick=function(){
    box.style.width='300px';
    }
    oWidth3.onclick=function(){
    box.style.width='400px';
    }
    oHeight1.onclick=function(){
    box.style.height='200px';
    }
    oHeight2.onclick=function(){
    box.style.height='300px';
    }

    oHeight3.onclick=function(){
    box.style.height='400px';
    }


    }
    </script>
    </head>
    <body id="body">
    <div id="top">
    <h2>请为下面的DIV设置样式:</h2>
    <span id="span1">点击设置</span>
    </div>
    <div id="box"></div>
    <div id="con">
    <p>请选择背景色:<span id="red">红</span><span id="yellow">黄</span><span id="blue">蓝</span></p>
    <p>请选择宽(px):<span id="width1">200</span><span id="width2">300</span><span id="width3">400</span></p>
    <p>请选择高(px):<span id="height1">200</span><span id="height2">300</span><span id="height3">400</span></p>
    <button class="btn1">恢复</button>
    <button class="btn2">确定</button>
    </div>

    </body>
    </html>

    运行效果:

  • 相关阅读:
    大数加法、乘法实现的简单版本
    hdu 4027 Can you answer these queries?
    zoj 1610 Count the Colors
    2018 徐州赛区网赛 G. Trace
    1495 中国好区间 尺取法
    LA 3938 动态最大连续区间 线段树
    51nod 1275 连续子段的差异
    caioj 1172 poj 2823 单调队列过渡题
    数据结构和算法题
    一个通用分页类
  • 原文地址:https://www.cnblogs.com/le220/p/7384999.html
Copyright © 2011-2022 走看看