JavaScript jQuery修改样式

jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。修改元素样式1.参数只写属性名，则是返回属性值$(this).css("color");2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css("color" , "red");3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以

柒边形选手

7618人浏览 · 2022-02-09 20:03:05

柒边形选手 · 2022-02-09 20:03:05 发布

jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式。

修改元素样式

1.参数只写属性名，则是返回属性值

$(this).css("color");

2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color" , "red");

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，

$(this).css({ "color":"white" ,"font-size":"20px"});

<body>
    <div></div>
    <script>
        $(function() {
            console.log($("div").css("width"));
            // $("div").css("width", "300px");
            // $("div").css("width", 300);数字不用加上引号
            // $("div").css(height, "300px"); 报错，因为属性名未加引号
            $("div").css({
                width: 400,
                height: 400,
                backgroundColor: "red"
                // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
            })
        })
    </script>
</body>

设置类样式：

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加点。

原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名，即追加。

1.添加类

$(“div").addClass("current");

2.移除类

$(“div”).removeClass("current");

3.切换类（可以进行添加类和移除类）

$(“div").toggleClass("current");

点击div对类进行操作：

    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;//旋转时间
        }
        
        .current {
            background-color: red;
            transform: rotate(360deg);//2D旋转角度
        }
    </style>

<body>
    <div class="current"></div>
    <script>
        $(function() {
            // 1. 添加类 addClass()
            // $("div").click(function() {
            //     // $(this).addClass("current");
            // });
            // 2. 删除类 removeClass()
            // $("div").click(function() {
            //     $(this).removeClass("current");
            // });
            // 3. 切换类 toggleClass()
            $("div").click(function() {
                $(this).toggleClass("current");
            });
        })
    </script>
</body>

tab栏切换案例：

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        $(function() {
            // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
            $(".tab_list li").click(function() {
                // 链式编程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.点击的同时，得到当前li 的索引号
                var index = $(this).index();
                //console.log(index);
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })
    </script>
</body>