代码改变世界

dom操作练习

2018-04-16 22:23  yelena  阅读(227)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        div{
            width: 1000px;
            background-color: lightcyan;
            margin: auto;
            box-shadow: 10px 10px 5px lavender;
            transition: 2s;
            
         }
        #xs{
            width: 70px;
            position: absolute;
            left:220px;
            top: 300px;
            z-index: -1;
            background-color: lightgrey;
            font-size: 10px;
        }
        .one{
            background-color: black;
            height: 100px;
        }
        
        
        
        
        
    </style>
    <body>
    <div id="ys1">
            1、函数传参 一个函数
            <br />
            <button onclick="clor1(0)">颜色变黄</button>
            <button onclick="clor1(1)">颜色变红</button>
            <button onclick="clor1(2)">颜色变黑</button>
            <button onclick="clor1(3)">恢复原样</button>
            <br />
        </div>
        <br />
        <br />
        <br />
        <div id="ys2">
            2、函数传参 两个函数
            <br />
            <br />
            <button onclick="clor2(0,0)">背景变窄</button>
            <button onclick="clor2(1,1)">背景变黄</button>
            <button onclick="clor2(2,2)">颜色变高</button>
            <button onclick="clor2(3,3)">恢复原样</button>
        </div>
        <br />
        <br />
        <br />
        <div id="bl">
            3、函数传参 参数加变量
            <br />
            <br />
            <input type="text" name="wb" value="你拍一 我拍一"/>
            <button onclick="aa()">改变文字</button>
            <button >添加标题属性</button>
        </div>
        
        <br />
        <br />
        <br />
        <div class="bb">
            4、修改样式、通过调用classname <br />
            <button onclick="gao()">变高变红</button>
            <button onclick="hui()">恢复原样</button>
        </div>
        
    </body>
    
</html>
<script type="text/javascript">
    
    
    function clor1(a){
        var ys = document.getElementById("ys1");
        if(a==0){
            ys.style.backgroundColor = "yellow";    
        }
        else if (a==1){
            ys.style.backgroundColor = "red";
        }
        else if (a==2){
            ys.style.backgroundColor = "black";
        }
        else if (a==3){
            ys.style.backgroundColor = "lightcyan";
        }
    }
    
    function clor2(a,b){
        var ys2 = document.getElementById("ys2");
        if(a==0&&b==0){
            ys2.style.width = "500px";
        }
        else if(a==1&b==1){
            ys2.style.backgroundColor = "yellow";
        }
        else if(a==2&b==2){
            ys2.style.height = "100px";
        }
        else if(a==3&b==3){
            ys2.style.width = "1000px";
            ys2.style.backgroundColor = 'lightcyan';
            ys2.style.height = "70px";
        }
    }
    
    
    function aa(){
        var wb = document.getElementsByName("wb")[0];
        wb.value = "两个小孩坐灰机";
    }
    
    
    function gao(){
        var g = document.getElementsByClassName("bb")[0];
        g.style.height = "200px";
        g.style.backgroundColor = "red";
    }
    function hui(){
        var h = document.getElementsByClassName("bb")[0];
        /*console.log(h.className)*/
        h.style.backgroundColor = "lightcyan";
        h.style.height = "48px";
        
    }
    
</script>