简单更改样式

来源：互联网发布：淘宝分销一件代发编辑：程序博客网时间：2024/06/07 13:58
简单更改块的样式

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><script type="text/javascript">    window.onload = abc;    function abc(){        var obtn=document.getElementById('btn');        var ofloat=document.getElementById('float');        var odiv1=document.getElementById('div1');        var oa1=document.getElementById('red');        var oa2=document.getElementById('yellow');        var oa3=document.getElementById('blue');        var ow2=document.getElementById('w-200');        var ow3=document.getElementById('w-300');        var ow4=document.getElementById('w-400');        var oh2=document.getElementById('h-200');        var oh3=document.getElementById('h-300');        var oh4=document.getElementById('h-400');        var oresrt=document.getElementById('resrt');        var oconfirm=document.getElementById('confirm');        obtn.onclick=function(){            ofloat.style.display='block';        }        oresrt.onclick=function(){            odiv1.style.background='#fff';            odiv1.style.width='100px';            odiv1.style.height='100px';        }        oconfirm.onclick=function(){            ofloat.style.display='none';        }        oa1.onclick=function(){            odiv1.style.background='red';        }        oa2.onclick=function(){            odiv1.style.background='yellow';        }        oa3.onclick=function(){            odiv1.style.background='blue';        }        ow2.onclick=function(){            odiv1.style.width='200px';        }        ow3.onclick=function(){            odiv1.style.width='300px';        }        ow4.onclick=function(){            odiv1.style.width='400px';        }        oh2.onclick=function(){            odiv1.style.height='200px';        }        oh3.onclick=function(){            odiv1.style.height='300px';        }        oh4.onclick=function(){            odiv1.style.height='400px';        }    }</script><style type="text/css">    body{         background: #efefef;        width: 100%;        height: 646px;        margin:0;        }    .span1 {        font-family: "黑体";        font-size: 25px;        font-weight: bold;        color: green;        vertical-align: middle;    }    #btn {        width: 100px;        height: 35px;        background: red;        border: none;        color: white;        font-weight: bold;        font-size: 16px;        vertical-align: middle;    }    #div1 {        width: 100px;        height: 100px;        border: 2px solid #999;        background: #fff;        margin-top: 25px;    }    #float {        width: 100%;        height: 100%;        background: #000;        opacity: 0.5;filter:alpha(opacity=50);        text-align: center;        font-family: "黑体";        color: #000;        position: absolute;        top: 0;left: 0;        display: none;    }    #float .box1 {        height: 100%;        vertical-align: middle;        display: inline-block;    }    #box {        width: 300px;        height: 200px;        border: 20px solid #8e8e8e;        background: #fff;        display: inline-block;        vertical-align: middle;    }    .border {        width: 34px;        height: 30px;        color: #3c3c3c;        border: 1px solid #999;        display: inline-block;        font-size: 13px;        line-height: 30px;        margin-top: 10px;        text-decoration: none;    }    #button {        padding-top: 18px;    }    #resrt,#confirm {        width: 80px;        height: 35px;        background: blue;        color: white;        font-weight: bold;        font-size: 16px;    }</style><body>    <span class="span1">请为下面的DIV设置样式：</span>    <input id="btn" type="button" name="" value="点击设置">    <div id="div1"></div>    <div id="float">        <span class="box1"></span><div id="box">            请选择背景色：            <span class="border" id="red">红</span>            <span class="border" id="yellow">黄</span>            <span class="border" id="blue">蓝</span></br>            请选择宽(px)：            <span class="border" id="w-200">200</span>            <span class="border" id="w-300">300</span>            <span class="border" id="w-400">400</span></br>            请选择高(px)：            <span class="border" id="h-200">200</span>            <span class="border" id="h-300">300</span>            <span class="border" id="h-400">400</span></br>            <div id="button">                <input id="resrt" type="button" name="" value="恢复">                <input id="confirm" type="button" name="" value="确定">            </div>        </div>    </div></body></html>
注意点：
1、var obtn=document.getElementById(‘btn’);分号不要忘
2、vertical-align: middle;意思是字体垂直居中
3、opacity: 0.5;filter:alpha(opacity=50);透明度为50%，后面半句为兼容性
0 0