JQuery操作样式_jquery css-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74350516/article/details/146036992

JQuery操作样式

css操作
- css()获取或设置样式，操作的是style属性。
  - 获取样式：css()方法，参数为要获取样式值的样式名。
    - 样式名可以用驼峰写法，也可以用-连接。例如，获取元素的width样式，既可以使用css('width')，也可以使用css('min - width')。若要获取border - left - width，驼峰写法为css('borderLeftWidth') 。这种灵活性使得开发者可根据编码习惯选择，同时也兼容CSS样式表中的写法。
    - 获取包含多个dom元素的jQuery对象的样式，只返回第一个元素对应的样式值。当使用$('div').css('height')时，无论页面上有多少个div元素，返回的是第一个匹配到的div的height样式值。若想获取所有div的height值，可结合each方法遍历$('div')来实现。如：

var divHeights = [];
$('div').each(function() {
    divHeights.push($(this).css('height'));
});
console.log(divHeights);

设置样式：css(样式名,样式值)
设置的是行内样式，直接修改元素的style属性。如$('#box').css('color','red')，会为id为box的元素添加行内的color样式。这种方式添加的样式优先级较高，会覆盖CSS样式表中相同属性的规则，但不会影响其他未被设置的样式属性。
可以设置单样式，每次设置一个样式属性。例如$('p').css('fontSize', '16px')，将所有p元素的字体大小设置为16px。在实际应用中，当需要单独调整某一类元素的某个样式属性时，这种方式非常实用，如在一个表单中，想统一所有input的border - color，就可使用$('input').css('borderColor', '#ccc')。
传入对象，可以设置多样式。通过$('div').css({ 'backgroundColor': 'blue', 'border': '1px solid black' })，能一次性为div元素设置背景颜色和边框样式。这种方式适用于需要同时改变元素多个样式属性的场景，减少代码量。例如，在创建一个模态框时，可一次性设置其背景、边框、内边距等样式：

$('.modal').css({
    'backgroundColor': 'rgba(0, 0, 0, 0.5)',
    'border': '2px solid white',
    'padding': '20px'
});

可以同时给多个dom元素设置样式，有隐式迭代的身影。当使用$('li').css('textDecoration', 'underline')时，所有匹配到的li元素都会应用下划线样式，无需手动循环遍历每个li元素。在复杂的页面结构中，若要对某一类元素进行批量样式修改，隐式迭代极大地提高了开发效率。比如，在一个产品列表中，想将所有产品的价格文字颜色设为红色，只需$('.product - price').css('color','red')。

class操作
- 添加类：addClass('class1 class2···')，可以添加单个类，也可以添加多个类。

$("#btn01").click(function () {
    $("#box").addClass("active  font");
});

当按钮#btn01被点击时，id为box的元素会同时添加active和font两个类。这在实现元素状态切换或应用多种样式效果时非常有用。例如，在一个导航栏中，当用户点击某个菜单项时，为其添加active类以显示选中状态，同时添加highlight类以突出显示：

$('.nav - item').click(function() {
    $(this).addClass('active highlight');
});

移除类：removeClass('class1 class2···')，可以移除单个类，也可以移除多个类。如果不加参数，就会移除所有的类名。

$("#btn02").click(function () {
    $("#box").removeClass("font");
});

当按钮#btn02点击时，#box元素上的font类会被移除。若要移除多个类，如active和highlight，可使用$('.nav - item').removeClass('active highlight')。当元素状态改变，需要取消之前添加的某些样式类时，此方法很常用。例如，当用户离开某个导航菜单项时，移除其选中和突出显示的类：

$('.nav - item').mouseleave(function() {
    $(this).removeClass('active highlight');
});

判断类：hasClass() 判断一个元素有没有类，有返回true，没有返回false。

$("#btn03").click(function () {
    var flag = $("#box").hasClass("font");
    console.log(flag);
});

通过此方法，可根据元素是否具有某个类来执行不同的逻辑。比如，在一个图片切换效果中，判断当前图片是否具有active类，若有则执行特定操作：

if ($('.current - image').hasClass('active')) {
    // 执行相应操作
}

切换类：toggleClass() 如果元素有某个类就移除这个类，如果元素没有这个类，就添加这个类。

$("#btn04").click(function () {
    $("#box").toggleClass("font");
});

在实现元素状态切换效果时，toggleClass非常便捷。例如，在一个折叠面板中，点击标题可切换面板的展开与收起状态，通过切换active类来控制面板的显示与隐藏样式：

$('.panel - title').click(function() {
    $(this).next('.panel - content').toggleClass('active');
});

案例：tab栏切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Tab点击切换</title>
    <script src="./js/jQuery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }
        #container {
            position: relative;
        }
        #content1,
        #content2,
        #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }
        #tab1,
        #content1 {
            background-color: #ffcc00;
        }
        #tab2,
        #content2 {
            background-color: #ff00cc;
        }
        #tab3,
        #content3 {
            background-color: #00ccff;
        }
       .selected {
            display: block;
        }
       .active {
            border - top: 5px solid red;
        }
    </style>
</head>
<body>
    <h2>Tab点击切换</h2>
    <ul id="tab">
        <li id="tab1">10元套餐</li>
        <li id="tab2">30元套餐</li>
        <li id="tab3">50元包月</li>
    </ul>
    <div id="container">
        <div id="content1">10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟</div>
        <div id="content2">30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟</div>
        <div id="content3">50元包月详情：<br />&nbsp;每月无限量随心打</div>
    </div>
    <script>
        $(function () {
            $("#tab>li").click(function () {
                // 给点击的每个li添加类active
                $(this).addClass("active").siblings("li").removeClass("active");
                var index = $(this).index();
                // 筛选出对应的内容
                $("#container>div").eq(index).show().siblings("div").hide();
            });
        });
    </script>
</body>
</html>

在上述tab栏切换代码中，当用户点击#tab下的li元素时，利用addClass为当前点击的li添加active类，同时使用removeClass移除其他兄弟li的active类，实现选中状态的切换。通过$(this).index()获取当前点击li的索引，再依据索引使用eq方法显示对应的#container下的div内容，并隐藏其他兄弟div内容。这种实现方式利用了jQuery强大的选择器和样式操作方法，简洁高效地完成了tab栏切换功能。

还可进一步拓展，例如在切换时添加动画效果，通过fadeIn和fadeOut方法，使内容切换更加流畅自然。可在click事件处理函数中修改如下：

$(function () {
    $("#tab>li").click(function () {
        $(this).addClass("active").siblings("li").removeClass("active");
        var index = $(this).index();
        $("#container>div").eq(index).fadeIn(300).siblings("div").fadeOut(300);
    });
});

另外，可增加键盘操作支持，比如按Tab键或方向键也能切换tab栏。通过监听keydown事件，判断按键并执行相应的切换逻辑：

$(document).keydown(function(event) {
    var tabItems = $('#tab li');
    var currentIndex = tabItems.index($('.active'));
    if (event.key === 'Tab' || event.key === 'ArrowRight') {
        if (currentIndex < tabItems.length - 1) {
            tabItems.eq(currentIndex + 1).click();
        }
    } else if (event.key === 'ArrowLeft') {
        if (currentIndex > 0) {
            tabItems.eq(currentIndex - 1).click();
        }
    }
});