jQuery中的.css()方法用于获取或设置元素的CSS属性。以下是一些使用.css()方法的示例:

1. 获取元素的CSS属性值:
   var color = $('#myElement').css('color');

   这将返回#myElement元素的color属性的值。

2. 设置元素的CSS属性值:
   $('#myElement').css('color', 'red');

   这将把#myElement元素的文本颜色设置为红色。

3. 设置多个CSS属性值:
   $('#myElement').css({
     'color': 'red',
     'font-size': '20px',
     'background-color': 'yellow'
   });

   这样可以同时设置多个CSS属性。

下面是一个完整的例子:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery CSS 方法</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    #myElement {
      width: 200px;
      height: 100px;
      border: 2px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>

<div id="myElement">这是一个元素</div>

<script>
  // 获取并输出元素的高度和宽度
  var height = $('#myElement').css('height');
  var width = $('#myElement').css('width');
  console.log('Height: ' + height + ', Width: ' + width);

  // 设置元素的新高度和宽度
  $('#myElement').css({
    'height': '150px',
    'width': '250px',
    'background-color': 'lightblue'
  });
</script>

</body>
</html>

在这个例子中,初始时div元素有一些CSS样式。然后,通过.css()方法获取并输出元素的高度和宽度,然后再通过.css()方法设置元素的新高度、宽度和背景颜色。

确保在使用jQuery之前引入jQuery库。


转载请注明出处:http://www.zyzy.cn/article/detail/12884/jQuery