jQuery 中的 css() 方法有什么用？

概述

jQuery 是一款流行且使用广泛的 JavaScript 库，它拥有为开发者简化DOM操作的丰富功能，使得可通过 jQuery 的 API 完成大多数的Web前端开发任务。其中，css() 方法是jQuery 中最常用的方法之一，它用于操作HTML元素的样式。

css() 方法的使用方法

在 jQuery 中，css() 方法用于设置或获取一个或多个HTML元素的 CSS 属性值。通常，css() 方法有以下两种用法:

1. 设置CSS属性值

使用css() 方法来设置CSS属性的值：

$(selector).css(property,value)

其中，参数property为要设置的CSS属性的名称，参数value为CSS属性对应的值。

示例代码，更改某个元素的CSS属性：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
    $("#test1").css("background-color", "yellow");
  });
});
</script>
</head>
<body>

<p id="test1">Click the button to change the background color of this paragraph</p>
<button>Change Color</button>

</body>
</html>

点击按钮，会将该段落文本的背景颜色改为黄色。

2. 获取CSS属性的值

使用css() 方法来获取CSS属性的值:

$(selector).css(property)

其中，参数property为要获取的CSS属性名称。

示例代码，获取某个元素的CSS属性：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
 $(document).ready(function(){$ ("button").click(function(){
    alert("Paragraph background color is " + $("#test1").css("background-color"));
  });
});
</script>
</head>
<body>

<p id="test1" style="background-color:yellow">This is some text in a paragraph.</p>
<button>Get background-color</button>

<p><b>Note:</b> If the property does not exist, returns undefined.</p>

</body>
</html>

点击按钮，弹出一个消息框，其中包含了该段落文本的背景颜色值。