jQuery 样式操作
jQuery中常用的样式操作有两种：css() 和 设置类样式方法
1. 方法1: 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
常用以下三种形式 :
// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');
// 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css('color', red');
// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});
注意：css() 多用于样式少时操作，多了则不太方便。
<script>
//操作样式之css方法
$(function() {
console .1og($("div").css("width"));
// $("div").css("width", "300px");
// $("div").css("width", 300); 值是数字则可以不用加引号
// $("div").css(height, "300px"); 属性名一定要加引号
$("div" ).css({
width: 400 ,
height: 400,
backgroundColor: "red"
// 如果是复合属性则必须采取驼峰命名法， 如果值不是数字，则需要加引号
})
})
</script>2. 方法2: 设置类样式方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
常用的三种设置类样式方法：
// 1.添加类
$("div").addClass("current");
// 2.删除类
$("div").removeClass("current");
// 3.切换类
$("div").toggleClass("current");
注意：
- 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
- 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
3. 案例：tab 栏切换
思路分析: 1.点击上部的li，当前li 添加current类，其余兄弟移除类。 2.点击的同时，得到当前li 的索引号 3.让下部里面相应索引号的item显示，其余的item隐藏
<script>
$(function () {
$('.tab_list li').click(function () {
// 1.点击上面小li，当前小li添加current类，其余的li移除
$(this).addClass('current').siblings().removeClass();
// 2.得到点击的小li的索引号
var index = $(this).index();
// console.log(index);
// 3.让下面相应索引号的item显示，其余的item隐藏
$('.item').eq(index).show().siblings().hide();
});
})
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-10-04 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录