jQuery操作css

本文介绍了如何使用jQuery操作元素的CSS样式及类属性,包括更改样式、添加和删除类等方法,并通过实例展示了不同场景的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


操作CSS样式
css(css)
css(css,val)
css({css1:val1,css2,val2,…..})


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM编程-操作CSS</title>
        <style type="text/css">
            li{
                font-size: 12px;
                color: #ffffff;
                background-color:gray;
                border-radius:5px;
                height: 33px;
                width:104px;
                text-align: center;
                line-height:38px;
                list-style:none;
                float:left;
            }
            
            
            
        </style>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //页面加载完后给所有的li绑定事件
            $(function(){
                //给所有的li绑定over事件
                $("li").mouseover(function(){
                    //$(this).css("font-size","16px");
                    //$(this).css("color","yellow");
                    //$(this).css("background-color","red");
                    $(this).css("font-size","16px").css("color","yellow").css("background-color","red");
                    
                });
                
                //给所有的li绑定out事件
                $("li").bind("mouseout",function(){
//                    $(this).css("font-size","12px");
//                    $(this).css("color","#ffffff");
//                    $(this).css("background-color","gray");
                    $(this).css({"font-size":"12px","color":"#ffffff","background-color":"gray"});//JSON
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>前端技术</li>
            <li>编程技术</li>
            <li>数据库</li> 
       </ul>
    </body>
</html>

 

操作类样式
hasClass(class)  
addClass(class)  addClass() 追加类样式,而不是覆盖类样式
removeClass(class)
toggleClass(class)


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM编程-操作CSS</title>
        <style type="text/css">
            li{
                font-size: 12px;
                color: #ffffff;
                background-color:gray;
                border-radius:5px;
                height: 33px;
                width:104px;
                text-align: center;
                line-height:38px;
                list-style:none;
                float:left;
            }
            
            .over{
                font-size: 16px;
                color: yellow;
                background-color:red;
            }
            .out{
                font-size: 12px;
                color: #ffffff;
                background-color:gray;
            }
            
        </style>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //页面加载完后给所有的li绑定事件
            $(function(){
                //给所有的li绑定over事件
                $("li").mouseover(function(){
                    $(this).removeClass("out");
                    $(this).addClass("over");
                    //this.className ="over";
                });
                
                //给所有的li绑定out事件
                $("li").bind("mouseout",function(){
                    //$(this).removeClass("over");
                    //$(this).addClass("out");
                    $(this).removeClass("over").addClass("out");
                });
            });
        </script>
    </head>
    <body>
        <ul>
            <li>前端技术</li>
            <li>编程技术</li>
            <li>数据库</li> 
       </ul>
    </body>
</html>

 

操作类样式
hasClass(class)
addClass(class)  addClass() 追加类样式,而不是覆盖类样式
removeClass(class)
toggleClass(class)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM操作-操作CSS</title>
        <style type="text/css">
            .myClass{
                background-color: #A5E5AA;
            }
        </style>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("p").click(function(){
                    /*
                    if($(this).hasClass("myClass")){
                        
                        $(this).removeClass("myClass");
                    }else{
                        $(this).addClass("myClass")
                    }*/
                    $(this).toggleClass("myClass");                        
                });                
            });
        </script>
    </head>
    <body>
        <p>阿里巴巴:马云</p>
        <p>腾讯:马化腾</p>
        <p>百度:李彦宏、马东敏</p>
        <p>京东:刘强东</p>
        <p>小米:雷军 </p>
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值