jquery css属性练习

最新推荐文章于 2024-10-01 18:51:18 发布

weixin_33688840

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量82

点赞数

文章标签： javascript xhtml ViewUI

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>css属性(专门用于class属性设置)</title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css"> 
        .c1{color:red;}
        .c2{font-size:50px;}
        .c3{width:100px;height:100px;border:1px solid red;}
  </style>
  <script  type="text/javascript" src="jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
  /*
     addClass   //添加一个样式 
     removeClass //移除一个样式
     toggleClass  //切换样式(如果有就移除，如果没有就添加)
     hasClass   //判断是否具有某个样式
  */ 
        window.onload=function(){
            $('#btnOk').click(function(){
                //添加c3样式 
                //$('div').addClass('c3');

                //移除一个样式
                //$('div').removeClass('c1');

                //切换样式(如果有就移除，如果没有就添加)
                    //$('div').toggleClass('c3');

                      //判断是否具有某个样式
                    if($('div').hasClass('c1')){
                        alert('具有c1属性');
                    };
            });
        };
  </script>
 </head>
 <body>
   <div class='c1 c2 '>test</div>
    <hr />
 <input type="button" id='btnOk' value='确定'  />
 </body>
</html>