基础样式设置

Posted tis100204

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基础样式设置相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS基础 热身课练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            position: relative;
        }
        p {
            padding: 20px;
            margin-right: 20px;
        }
        #box {
            width: 100px;
            height: 100px;
            border: 5px solid black;
            margin-left: 20px;
        }
        #mask {
            position: fixed;
            height:100%;
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            display: none;
        }
        #setting {
            width: 350px;
            height: 300px;
            border: 10px solid gray;
            background: white;
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .options {
            padding: 20px;
        }
        .options span {
            display: inline-block;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            cursor: pointer;
        }
        #bgRed {
            background: red;
        }
        #bgYellow {
            background: yellow;
        }
        #bgGreen {
            background: green;
        }
        .last {
            text-align: center;
        }
    </style>
    <script>
        
    </script>
</head>
<body>
    <div id="mask">
        <div id="setting">
        <div class="options" id="color">
            选择背景:
            <span id="bgRed" color="red">红</span>
            <span id="bgYellow" color = "yellow">黄</span>
            <span id="bgGreen" color="green">绿</span>
        </div>
        <div class="options" id="w">
            选择宽度:
            <span id="width200">200</span>
            <span id="width300">300</span>
            <span id="width400">400</span>
        </div>
        <div class="options" id = "h">
            选择高度:
            <span id="height200">200</span>
            <span id="height300">300</span>
            <span id="height400">400</span>
        </div>
        <div class="options last">
            <span id="reset">恢复</span>
            <span id="ok">确定</span>
        </div>
    </div>
    </div>
    <p>请为下面的div设置样式:<input id="set" type="button" value="点击设置样式"></p>
    <div id="box"></div>
</body>
</html>
<script src="public.js"></script>
<script>
    $id("set").onclick = function(){
        $id("mask").style.display = "block";
    }
    $id("ok").onclick = function(){
        $id("mask").style.display = "none";
    }
    //定义三个函数 设置颜色 设置宽度 设置高度
    function setColor(color){
        $id("box").style.backgroundColor = color;
    }
    function setWidth(width){
        $id("box").style.width = width + "px";
    }
    function setHeight(height){
        $id("box").style.height = height + "px";
    }
    
    var colorSpan = $id("color").children;
    for( var i = 0 ; i < colorSpan.length ; i++ ){
        colorSpan[i].onclick = function(){
            setColor( this.getAttribute("color") );
        }
    }
    
    var widthSpan = $id("w").children;
    for( var i = 0 ; i < widthSpan.length ; i++ ){
        widthSpan[i].onclick = function(){
            setWidth( this.innerHTML );
        }
    }
    
    var heightSpan = $id("h").children;
    for( var i = 0 ; i < heightSpan.length ; i++ ){
        heightSpan[i].onclick = function(){
            setHeight( this.innerHTML );
        }
    }
    
    $id("reset").onclick = function(){
        setColor("transparent");
        setWidth(100);
        setHeight(100);
    }
</script>

以上是关于基础样式设置的主要内容,如果未能解决你的问题,请参考以下文章

小5聊C#版本NPOI之基础样式设置

Android基础TOP5_4:点击按钮更换样式,设置透明度

JS基础知识——获取未设置行内元素的样式,定时器

Axure基础:矩形操作

微信小程序wxss设置样式

自定义博客园主题样式