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

最新推荐文章于 2026-05-17 05:13:14 发布

原创

最新推荐文章于 2026-05-17 05:13:14 发布 · 1.2k 阅读

收录于

当前文章被以下社区和专栏收录：

以下是使用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() {