- 修改元素样式
- 获取属性值
$(this).css("color");
- 设置属性值
$(this).css("color" , "red");
- 设置多个属性值
$(this).css({ "color":"white" ,"font-size":"20px"}); $("div").css({ width: 400, height: 400, backgroundColor: "red" // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号 })
- 设置类样式
- 添加类
$("div").addClass("current");
- 移除类
$("div").removeClass("current");
- 切换类（可以进行添加类和移除类）
$("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>
