简单更改样式

最新推荐文章于 2021-02-15 11:33:47 发布

可芭乐

最新推荐文章于 2021-02-15 11:33:47 发布

阅读量300

点赞数

分类专栏：小作品文章标签： js

本文链接：https://blog.csdn.net/a839371666/article/details/52890677

版权

小作品专栏收录该内容

10 篇文章 0 订阅

订阅专栏

简单更改块的样式

<!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

收藏

觉得还不错? 一键收藏
0
评论
简单更改样式

简单更改块的样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><script type="text/javascript"> window.onload = abc; function abc(){ var ob
复制链接

扫一扫

专栏目录