jquery 动态添加csss

原创

mob64ca12f15103 2023-08-24 11:45:28 ©著作权

文章标签 CSS 动态添加 jQuery 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f15103的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 动态添加CSS

在Web开发中，我们经常需要通过修改元素的CSS样式来改变页面的外观和交互效果。而使用jQuery库可以帮助我们更加方便地操作DOM元素，并且可以动态添加CSS样式。本文将介绍如何使用jQuery动态添加CSS，并提供一些示例代码。

使用方法

jQuery提供了一个方便的方法css()来修改元素的CSS样式。该方法可以接受一个对象作为参数，对象的属性为CSS属性名，值为CSS属性值。例如：

$("div").css({
  "color": "red",
  "background-color": "yellow"
});

上述代码将选择所有的<div>元素，并将它们的文字颜色设置为红色，背景颜色设置为黄色。

动态添加CSS

在上述的基础上，我们还可以通过jQuery动态添加CSS样式。通过调用css()方法并传入一个对象，可以在不修改元素已有样式的情况下，动态添加新的CSS样式。例如：

$("div").css({
  "font-size": "20px",
  "border": "1px solid blue"
});

上述代码将选择所有的<div>元素，并添加一个20像素大小的字号和一个蓝色边框。

示例代码

下面我们通过几个示例来演示如何使用jQuery动态添加CSS。

示例一：改变文字颜色

我们先创建一个HTML页面，包含一个按钮和一个段落元素。当点击按钮时，通过jQuery动态改变段落元素的文字颜色。

<!DOCTYPE html>
<html>
<head>
  <title>动态添加CSS示例</title>
  <script src="
  <script>
    $(document).ready(function() {
      $("#changeColorBtn").click(function() {
        $("#myParagraph").css("color", "red");
      });
    });
  </script>
  <style>
    p {
      font-size: 18px;
      color: black;
    }
  </style>
</head>
<body>
  <button id="changeColorBtn">改变颜色</button>
  <p id="myParagraph">这是一个段落。</p>
</body>
</html>

上述代码中，我们使用了click()方法来绑定按钮的点击事件。当点击按钮时，通过css()方法将段落元素的文字颜色改为红色。

示例二：动态修改图片大小

我们创建一个包含一些图片的网格布局页面。当鼠标悬停在图片上时，通过jQuery动态修改图片的宽度和高度。

<!DOCTYPE html>
<html>
<head>
  <title>动态添加CSS示例</title>
  <script src="
  <script>
    $(document).ready(function() {
      $("img").hover(function() {
        $(this).css({
          "width": "200px",
          "height": "200px"
        });
      }, function() {
        $(this).css({
          "width": "100px",
          "height": "100px"
        });
      });
    });
  </script>
  <style>
    img {
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="grid">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
  </div>
</body>
</html>

上述代码中，我们使用了hover()方法来绑定图片的鼠标悬停事件。当鼠标悬停在图片上时，通过css()方法将图片的宽度和高度改为200像素；当鼠标离开图片时，将它们的宽度和高度改回100像素。