jquery实现操作样式实例

柔情只为你懂 2022-09-14 09:10 184阅读 0赞

**css:**

<style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
                box-sizing: border-box;
            }
    
            .wrap {
                width: 700px;
                height: 400px;
                border: 1px solid #000;
                margin: 30px;
                position: relative;
                vertical-align: top;
            }
    
            .box {
                width: 300px;
                height: 100px;
                border: 1px solid #000;
                margin: 20px;
                display: inline-block;
                /* vertical-align: top; */
            }
    
            .box+button {
                /* vertical-align: top; */
                /* float: right; */
                position: absolute;
                top: 10px;
                right: 10px;
                margin: 10px;
            }
    
            .meng {
                background: rgba(0, 0, 0, 0.3);
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }
    
            .float {
                position: absolute;
                right: 10px;
                top: 10px;
                width: 230px;
                height: 380px;
                border: 1px solid #000;
                background-color: #fff;
                padding: 10px;
                display: none;
            }
    
            h3 {
                margin-bottom: 10px;
            }
    
            span {
                display: inline-block;
                width: 90px;
                line-height: 30px;
                border: 1px solid #000;
                margin: 0 5px 5px 0;
                text-align: center;
            }
    
            .float button {
                margin: 10px;
            }
        </style>

**html:**

<div class="wrap">
            <div class="box"></div>
            <button>点击显示的样式</button>
            <div class="meng"></div>
            <div class="float">
                <h3>大小</h3>
                <span>300*300</span><span>200*300</span><span>300*200</span><span>300*100</span>
                <h3>颜色</h3>
                <span>#aaff55</span><span>#358796</span><span>#00876e</span><span>#ff0087</span>
                <button>确定</button><button>取消</button>
            </div>
        </div>

**javascript:**

<script src="./js/jquery.js"></script>
        <script>
            /* 点击按钮 让蒙层和右侧盒子显示 */
            $('button:eq(0)').click(function () {
                $('.wrap div').css('display', 'block');
            });
            /* 
                2. 划上每一个span 将内容赋值给左侧box
                jq对象.html(): 获取到元素的内容
            */
            $('span').mouseenter(function () {
                console.log($(this));
                var t = $(this).html().split('*');
                console.log(t);
                $('.box').css({
                    width: t[0],
                    height: t[1],
                    background: t[0]
                });
            });
            /* 3. 点击确定 隐藏蒙层和右侧盒子 */
            $('button:eq(1)').click(function () {  
                $('.wrap div:gt(0)').css('display','none');
            });
            $('button:eq(2)').click(function () {  
                $('.wrap div:gt(0)').css('display','none');
                $('.box').css({
                    width:300,
                    height:100,
                    background:''
                });
            });
    
        </script>

**效果：**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ad3fd88abb92408cb03d7fe8756b276d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/0839534afc944cc182a29a02710f75ec.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/37c10eb5b8f647789ee906398226ec1c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 3_1jQuery操作属性和样式

jQuery操作属性和样式操作属性原生js 中的通过元素.属性名或者元素.setAttribute()方式操作元素属性,jQuery给我们封装了attr() 和remo

﹏ヽ暗。殇╰゛Y/ 2023年09月27日 15:09/ 0 赞/ 103 阅读

相关 jQuery样式操作（Tab栏切换）

一、操作方法主要有两种方法：一种是操作css方法，另外一种是设置类样式。操作css方法 1. 参数只写属性名，则返回属性值 2. 参数是属性名，属性值，逗号隔

心已赠人/ 2023年07月03日 13:28/ 0 赞/ 5 阅读

相关 jQuery 样式操作

jQuery 样式操作设置样式 .css() 为标签添加样式 .css( "属性" , "属性值" ) .css( "

桃扇骨/ 2022年10月01日 08:00/ 0 赞/ 212 阅读

相关 jquery实现操作样式实例

css: <style> { margin: 0; padding: 0;

柔情只为你懂/ 2022年09月14日 09:10/ 0 赞/ 185 阅读

相关 JQuery中操作Css样式的方法

本篇文章主要是对JQuery中操作Css样式的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助复制代码代码如下: //1、获取和设置样式

红太狼/ 2022年08月05日 01:30/ 0 赞/ 177 阅读

相关 jquery操作样式

<script type="text/javascript"> $(function () \{ $('\btn').clic

￡神魔★判官ぃ/ 2022年06月02日 20:15/ 0 赞/ 178 阅读

相关 jQuery操作CSS样式的方法

jQuery操作CSS样式的方法总共有四种，很简单，建议使用下面的第三种方法。上代码： <!DOCTYPE html> <html lang="en">

矫情吗；*/ 2022年03月12日 10:44/ 0 赞/ 312 阅读

相关 jquery_jquery样式操作、链式编程

1、jquery样式操作　　![1151059-20190530151344838-450723333.png][] 2、jquery操作类样式　　![1151059

落日映苍穹つ/ 2022年01月09日 11:41/ 0 赞/ 242 阅读

相关 Jquery选择器与样式操作

jquery选择器 jquery用法思想一选择某个网页元素，然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样

我不是女神ヾ/ 2021年07月04日 23:18/ 0 赞/ 423 阅读

相关 Jquery对属性、样式类class、CSS样式的操作

Jquery对属性的操作 1.读取属性值方法： (1)`$(selector).attr("name");` (2)`$(selector).prop("...

小鱼儿/ 2021年06月30日 09:56/ 0 赞/ 799 阅读