【JQuery】入门之操作样式

最新推荐文章于 2023-07-10 20:46:27 发布

夹心776655

最新推荐文章于 2023-07-10 20:46:27 发布

阅读量76

点赞数

分类专栏：代码实例 js交互设计文章标签： html jquery

本文链接：https://blog.csdn.net/qq_37086980/article/details/111530043

版权

代码实例同时被 2 个专栏收录

72 篇文章 3 订阅

订阅专栏

js交互设计

46 篇文章 0 订阅

订阅专栏

描述:

1. 点击显示div样式按钮让右侧内容块显示出来

2. 划上每一个小方块进行对应样式的设置

3. 点击确定隐藏右侧内容块

4. 点击取消让div变成初始样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作内容</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .mt10 {
            margin-top: 10px;
        }

        #wrap {
            width: 780px;
            height: 490px;
            border: 1px solid #8C8C8C;
            margin: 10px auto;
            position: relative;
        }

        #wrap .panel {
            width: 432px;
            height: 144px;
            border: 1px solid #8C8C8C;
            margin: 25px;
            float: left;
        }

        #wrap button {
            float: left;
            margin-top: 25px;
        }

        #wrap .mask {
            width: 780px;
            height: 490px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.2);
            display: none;
        }

        #wrap .mask .choose {
            width: 285px;
            height: 404px;
            background-color: #ffffff;
            margin: 25px 0 0 460px;
        }

        #wrap .mask .choose .container {
            width: 250px;
            height: 404px;
            margin: 0 auto;
            overflow: hidden;

        }

        #wrap .mask .choose .container h1 {
            margin-top: 20px;
        }

        #wrap .mask .choose .container span {
            display: inline-block;
            width: 120px;
            height: 40px;
            border: 1px solid #9C9C9C;
            text-align: center;
            font: 20px/40px "微软雅黑";
            cursor: pointer;
        }

        #wrap .mask .choose .container .cancel {
            margin-left: 5px;
        }
    </style>
</head>

<body>
    <!-- 1.布局 遮罩层-->
    <div id="wrap">
        <div class="panel">
        </div>
        <button id="display">点击显示div样式</button>
        <div style="clear: both;"></div>
        <div class="mask">
            <div class="choose">
                <div class="container">
                    <h1>大小</h1>
                    <span class="font">300*300</span>
                    <span class="font">200*300</span>
                    <span class="font mt10">300*200</span>
                    <span class="font mt10">100*300</span>
                    <h1>颜色</h1>
                    <span class="color">#ff0000</span>
                    <span class="color">#00ff00</span>
                    <span class="color mt10">#0000ff</span>
                    <span class="color mt10">#00ffff</span>
                    <button class="mt10 confirm">确定</button>
                    <button class="mt10 cancel">取消</button>
                </div>
            </div>
        </div>
    </div>
    <script src="./jquery.js"></script>
    <script>
        /* 
                    1. 点击显示div样式按钮  让右侧内容块显示出来
                    2. 划上每一个小方块 进行对应样式的设置
                    3. 点击确定 隐藏右侧内容块
                    4. 点击取消 让div变成初始样式
        */
        //  1.获取div样式按钮, 显示遮罩层
        // console.log($('#display'));
        $('#display').click(function () {
            $('.mask').css('display', 'block');
        })

        // 2. 划上每一个小方块 进行对应样式的设置
        $('span').mouseenter(function () {
            // console.log($(this).index());
            var index = $(this).index();
            // console.log(index);
            // 获取对应的值
            // console.log($(this).html());
            value = $(this).html();
            // console.log(fontValue); 
            // console.log(fontValue.split('*'));    
            var arr = value.split('*');
            if (arr.length > 1) {
                // 当前点击是宽高
                $('.panel').css({
                    'width': arr[0],
                    'height':  arr[1]
                });
            }else{
                // 当前点击是颜色
                $('.panel').css({
                    'background':arr[0]
                });
            }
        });

        //  3. 点击确定 隐藏遮罩层
        $('.confirm').click(function () {
            $('.mask').css('display', 'none');
        });

        // 4. 点击取消 让div变成初始样式
        $('.cancel').click(function () {
            $('.mask').css('display', 'none');
            $('.panel').css({
                'width': '',
                'height': '',
                'background': ''
            });
        })
    </script>
</body>

</html>

夹心776655

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】入门之操作样式

描述:1. 点击显示div样式按钮让右侧内容块显示出来2. 划上每一个小方块进行对应样式的设置3. 点击确定隐藏右侧内容块4. 点击取消让div变成初始样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫