jQuery修改颜色|极客教程

jQuery修改颜色

在网页开发中，修改元素的颜色是一项常见的操作。jQuery是一个流行的JavaScript库，它提供了简洁的语法和强大的功能，使得操作DOM元素变得更加容易。本文将介绍如何使用jQuery来修改元素的颜色，包括修改文本颜色、背景颜色以及其他元素的颜色。

修改文本颜色

1. 修改文本颜色为红色

<!DOCTYPE html>
<html>
<head>
  <title>jQuery修改文本颜色</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p id="text">Hello, geek-docs.com!</p>

  <script>
     $(document).ready(function(){$ ("#text").css("color", "red");
    });
  </script>
</body>
</html>

Output:

jQuery修改颜色

运行结果：文本颜色变为红色。

2. 修改文本颜色为蓝色

<!DOCTYPE html>
<html>
<head>
  <title>jQuery修改文本颜色</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p id="text">Hello, geek-docs.com!</p>

  <script>
     $(document).ready(function(){$ ("#text").css("color", "blue");
    });
  </script>
</body>
</html>

Output:

jQuery修改颜色

运行结果：文本颜色变为蓝色。

修改背景颜色

3. 修改背景颜色为黄色

<!DOCTYPE html>
<html>
<head>
  <title>jQuery修改背景颜色</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="box" style="width: 200px; height: 200px;"></div>

  <script>
     $(document).ready(function(){$ ("#box").css("background-color", "yellow");
    });
  </script>
</body>
</html>

Output:

jQuery修改颜色

运行结果：背景颜色变为黄色。

4. 修改背景颜色为绿色

<!DOCTYPE html>
<html>
<head>
  <title>jQuery修改背景颜色</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="box" style="width: 200px; height: 200px;"></div>

  <script>
     $(document).ready(function(){$ ("#box").css("background-color", "green");
    });
  </script>
</body>
</html>

Output:

jQuery修改颜色

运行结果：背景颜色变为绿色。

修改其他元素的颜色

5. 修改链接文本颜色为橙色

<!DOCTYPE html>
<html>
<head>
  <title>jQuery修改其他元素的颜色</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <a id="link" href="#">geek-docs.com</a>

  <script>
     $(document).ready(function(){$ ("#link").css("color", "orange");
    });
  </script>
</body>
</html>

Output:

jQuery修改颜色

运行结果：链接文本颜色变为橙色。

6. 修改按钮背景颜色为紫色

<!DOCTYPE html>
<html>
<head>
  <title>jQuery修改其他元素的颜色</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="button">Click me</button>

  <script>
     $(document).ready(function(){$ ("#button").css("background-color", "purple");
    });
  </script>
</body>
</html>

Output:

jQuery修改颜色