javescript基础第一天

js第一天

js控制样式

结构
<div id="wrap">
        <div id="leftBox"></div>
        <button id="rightBut">点击显示div样式</button>
        <div id="gray"></div>
        <div id="edit">
            <h2>大小</h2>
            <p>
                <a href="#" id="size1">300*300</a>
                <a href="#" id="size2">200*300</a>
                <a href="#" id="size3">300*200</a>
                <a href="#" id="size4">100*300</a>
            </p>
            <h2>颜色</h2>
            <p>
                <a href="#" id="color1">#ff0000</a>
                <a href="#" id="color2">#00ff00</a>
                <a href="#" id="color3">#0000ff</a>
                <a href="#" id="color4">#00ffff</a>
            </p>
            <button id="true">确定</button>
            <button id="false">取消</button>
        </div>
    </div>

样式
<style>
        *{padding: 0;margin: 0;text-decoration: none;}
        #wrap{
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid gray;
            padding: 20px;
        }
        #leftBox{
            width: 300px;
            height: 100px;
            border: 1px solid gray;
        }
        #rightBut{
            position: absolute;
            top:20px;
            left:340px;
        }
        #gray{
            display: none;
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.4;
        }
        #edit{
            display: none;
            position: absolute;
            top:20px;
            right:20px;
            width: 180px;
            height: 260px;
            padding: 10px;
            background: #fff;
        }
        #edit a{
            display: inline-block;
            color: #000;
            border: 1px solid gray;
            width: 80px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            margin-bottom: 10px;
        }
    </style>

用js实现上面图片里面的样式

<script>
        var w = document.getElementById('wrap');
        var l = document.getElementById('leftBox');
        var r = document.getElementById('rightBut');
        var g = document.getElementById('gray');
        var e = document.getElementById('edit');
        var t = document.getElementById('true');
        var f = document.getElementById('false');
        var s1 = document.getElementById('size1');
        var s2 = document.getElementById('size2');
        var s3 = document.getElementById('size3');
        var s4 = document.getElementById('size4');
        var c1 = document.getElementById('color1');
        var c2 = document.getElementById('color2');
        var c3 = document.getElementById('color3');
        var c4 = document.getElementById('color4');

        r.onclick = function(){
            g.style.display = 'block';
            e.style.display = 'block';
        }
        t.onclick = function(){
            g.style.display = 'none';
            e.style.display = 'none';
        }
        s1.onmouseover = function(){
            l.style.width = '300px';
            l.style.height = '300px';
        }
        s1.onclick = function(){
            l.style.width = '300px';
            l.style.height = '300px';
        }
        s2.onmouseover = function(){
            l.style.width = '200px';
            l.style.height = '300px';
        }
        s2.onclick = function(){
            l.style.width = '200px';
            l.style.height = '300px';
        }
        s3.onmouseover = function(){
            l.style.width = '300px';
            l.style.height = '200px';
        }
        s3.onclick = function(){
            l.style.width = '300px';
            l.style.height = '200px';
        }
        s4.onmouseover = function(){
            l.style.width = '100px';
            l.style.height = '300px';
        }
        s4.onclick = function(){
            l.style.width = '100px';
            l.style.height = '300px';
        }
        c1.onmouseover = function(){
            l.style.background = "#ff0000";
        }
        c1.onclick = function(){
            l.style.background = "#ff0000";
        }
        c2.onmouseover = function(){
            l.style.background = "#00ff00";
        }
        c2.onclick = function(){
            l.style.background = "#00ff00";
        }
        c3.onmouseover = function(){
            l.style.background = "#0000ff";
        }
        c3.onclick = function(){
            l.style.background = "#0000ff";
        }
        c4.onmouseover = function(){
            l.style.background = "#00ffff";
        }
        c4.onclick = function(){
            l.style.background = "#00ffff";
        }
        f.onclick = function(){
            l.style = "";
            g.style.display = 'none';
            e.style.display = 'none';
        }


    </script>

先定义函数
var 名字 = document.getElementById(‘id名’);
声明事件，实现事件
f.onclick = function(){
l.style = “”;
g.style.display = ‘none’;
e.style.display = ‘none’;
}