如何使用 jQuery 选择器动态修改元素样式？

最新推荐文章于 2025-03-05 10:50:17 发布

alankuo

最新推荐文章于 2025-03-05 10:50:17 发布

阅读量1k

点赞数 28

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/alankuo/article/details/143658281

版权

以下是使用jQuery选择器动态修改元素样式的详细方法及示例：

一、利用事件触发动态修改样式

在网页交互中，常常需要根据用户的操作（如点击、鼠标移动、键盘输入等事件）来动态改变元素的样式。可以通过为元素添加事件处理函数，并在函数内使用jQuery选择器修改元素样式。

示例1：点击按钮改变段落文字颜色

<!DOCTYPE html>
<html>

<head>
    <title>jQuery动态修改元素样式示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <p id="myParagraph">这是一个原始段落内容。</p>
    <button id="changeColorButton">点击改变段落颜色</button>
    <script>
        $(document).ready(function() {
            // 为按钮添加点击事件处理函数
            $('#changeColorButton').click(function() {
                // 使用ID选择器选取段落元素并修改其文字颜色为蓝色
                $('#myParagraph').css('color', 'blue');
            });
        });
    </script>
</body>

</html>

在上述示例中：

首先通过$('#changeColorButton')使用ID选择器选取了id为changeColorButton的按钮元素。
然后为该按钮添加了一个点击事件处理函数，当按钮被点击时，在函数内部通过$('#myParagraph')再次使用ID选择器选取id为myParagraph的段落元素，并使用.css('color', 'blue')将其文字颜色修改为蓝色。

示例2：鼠标悬停改变列表项背景颜色

<!DOCTYPE html>
<html>

<head>
    <title>jQuery动态修改元素样式示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
    <script>
        $(document).ready(function() {
            // 为列表项添加鼠标悬停事件处理函数
            $('li').mouseover(function() {
                // 使用标签选择器选取当前鼠标悬停的列表项并修改其背景颜色为浅黄色
                $(this).css('background-color', 'lightyellow');
            });

            // 为列表项添加鼠标移出事件处理函数
            $('li').mouseout(function() {
                // 使用标签选择器选取当前鼠标移出的列表项并恢复其背景颜色为默认值
                $(this).css('background-color', '');
            });
        });
    </script>
</body>

</html>

在这个示例中：

先通过$('li')使用标签选择器选取了所有的列表项元素。
接着为每个列表项分别添加了鼠标悬停（mouseover）和鼠标移出（mouseout）事件处理函数。当鼠标悬停在某个列表项上时，在mouseover事件处理函数内，通过$(this)指代当前鼠标悬停的列表项元素，并使用.css('background-color', 'lightyellow')将其背景颜色改为浅黄色。当鼠标移出列表项时，在mouseout事件处理函数内，同样通过$(this)选取当前鼠标移出的列表项元素，并使用.css('background-color', '');恢复其背景颜色为默认值（即清除之前设置的背景颜色）。

二、根据条件动态修改样式

除了基于事件触发，还可以根据某些条件的判断结果来动态修改元素的样式。

示例3：根据输入框内容长度改变提示文字颜色

<!DOCTYPE html>
<html>

<head>
    <title>jQuery动态修改元素样式示例</title>
    <script src="https://cdnjs.cloudflare.com/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
    <input type="text" id="inputBox" placeholder="请输入内容">
    <p id="hintText">请输入至少5个字符。</p>
    <script>
        $(document).ready(function() {
            // 为输入框添加输入事件处理函数
            $('#inputBox').on('input', function() {
                // 获取输入框内的内容长度
                var inputLength = $(this).val().length;

                // 根据输入内容长度判断是否满足条件
                if (inputLength >= 5) {
                    // 使用ID选择器选取提示文字元素并修改其颜色为绿色
                    $('#hintText').css('color', 'green');
                } else {
                    // 使用ID选择器选取提示文字元素并修改其颜色为 red
                    $('#hintText').css('color', 'red');
                }
            });
        });
    </script>
</body>

</html>

在示例3中：

首先通过$('#inputBox')使用ID选择器选取了id为inputBox的输入框元素，并为其添加了一个输入（input）事件处理函数。
在事件处理函数内，先通过$(this).val().length获取输入框内输入内容的长度。然后根据这个长度与5的比较结果来决定是否满足条件。如果输入长度大于等于5，通过$('#hintText')使用ID选择器选取id为hintText的提示文字元素，并使用.css('color', 'green')将其颜色改为绿色；如果输入长度小于5，同样通过$('#hintText')选取提示文字元素，并使用.css('color', 'red')将其颜色改为红色。