• 技术文章 >web前端 >js教程

    jquery中怎么修改css样式

    青灯夜游青灯夜游2021-05-20 17:02:25原创8125

    jquery中修改css样式的方法:1、使用“css("属性名","属性值")”语句修改;2、使用“css({属性名:"属性值",属性名:"属性值"...})”语句修改;3、使用“toggleClass(“类名”)”语句修改。

    本教程操作环境:windows7系统、jquery1.10.0版本、Dell G3电脑。

    JQuery修改css样式的方法

    css部分:

    .div1{
          width:100px;
          height:100px;
          background:#00ff00;
          }
    .div2{
           width:100px;
           height:100px;
           background:#ff0000;
          }#Btndiv{
             width:100px;
             height:100px;
             border: 1px solid #ccc;
             margin-bottom: 10px;
             }

    jQuery代码:

    <div id="Btndiv" onclick="changeCss()"></div>
            <script>
                $(document).ready(function (){
                    //第一种
    //                $("div").css("width","100px");
    //                $("div").css("height","100px");
    //                $("div").css("background","cyan");
                    //第二种
    //                $("div").css({
    //                    width:"100px",height:"100px",background:"red"
    //                });
                    //第三种
                    $("div").addClass("div1");
                    $("div").click(function (){
    //                    $(this).addClass("div2");
    //                  $(this).removeClass("div1");
                        $(this).toggleClass("div2");
                    });
                });
        </script>

    相关视频教程推荐:jQuery教程(视频)

    以上就是jquery中怎么修改css样式的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery怎么取消css样式 下一篇:用js怎么改变css样式
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery url中文乱码怎么办• jquery 怎么判断指定样式是否存在• jquery怎么删除css某个style• jquery css()和attr()的区别是什么• jquery怎么去除css属性
    1/1

    PHP中文网