div样式操作

点击切换样式：

代码：`

    </div>

    <button id="btn"> 点击切换样式</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="notarize">确定</button>
        <button id="cancle">取消</button>
    </div>
</div>

<script>
    var btn = document.getElementById('btn');
    var leftBox = document.getElementById('leftBox');
    var gray = document.getElementById('gray');
    var edit = document.getElementById('edit');
    var size1 = document.getElementById('size1');
    var size2 = document.getElementById('size2');
    var size3 = document.getElementById('size3');
    var size4 = document.getElementById('size4');
    var color1 = document.getElementById('color1');
    var color2 = document.getElementById('color2');
    var color3 = document.getElementById('color3');
    var color4 = document.getElementById('color4');
    var notarize = document.getElementById('notarize');
    var cancle = document.getElementById('cancle');

    btn.onclick = function () {
        gray.style.display = 'block';
        edit.style.display = 'block';

    }

    size1.onclick = function () {
        leftBox.style.width = '300px';
        leftBox.style.height = '300px';
    }
    size2.onclick = function () {
        leftBox.style.width = '200px';
        leftBox.style.height = '300px';
    }

    size3.onclick = function () {
        leftBox.style.width = '300px';
        leftBox.style.height = '200px';
    }

    size4.onclick = function () {
        leftBox.style.width = '100px';
        leftBox.style.height = '300px';
    }

    color1.onclick = function () {
        leftBox.style.background = '#ff0000';
    }
    color2.onclick = function () {
        leftBox.style.background = '#00ff00';
    }

    color3.onclick = function () {
        leftBox.style.background = '#0000ff';
    }

    color4.onclick = function () {
        leftBox.style.background = '#00ffff';
    }
    notarize.onclick = function () {
        gray.style.display = 'none';
        edit.style.display = 'none';

    }
    cancle.onclick = function () {
        // leftBox.style.width = '100px';
        // leftBox.style.height = '100px';
        // leftBox.style.background = 'none';
        leftBox.style = 'width:100px;height=100px;background=none;border:1px solid pink';
        gray.style.display = 'none';
        edit.style.display = 'none';

    }
</script>

`