在前端开发中，样式调整是非常常见和重要的一个问题。而 jQuery 库提供了方便易用的方法来操作 DOM 元素的样式，其中一个最常用的方法就是 .css()。
什么是 .css()？
.css() 方法可以获取或设置一个或多个元素的 CSS 样式属性。它有两种使用方式：
- 获取单个 CSS 属性的值：
.css(propertyName) - 获取或设置多个 CSS 属性的值：
.css(propertyNames)
例如，我们可以通过以下方式获取某个元素的背景颜色：
------------------------------------
我们也可以同时获取多个属性的值，如下所示：
----------------- ------------------- ------- ------------ ------- -------- ------ ---
如何正确地使用 .css()？
虽然 .css() 方法看起来很简单，但在实际使用中可能会出现一些问题。以下是一些建议，以确保正确地使用该方法。
1. 尽量避免频繁使用 .css()
如果需要对同一个元素进行多次样式修改，最好将所有修改组合成一个对象，并在一个 .css() 调用中执行。这样做比分别调用 .css() 方法更高效。
2. 避免使用 !important
在 CSS 中，!important 是一个特殊的关键字，它可以覆盖同一属性的所有其他规则。但是在 jQuery 中，使用 !important 可能会导致样式无法正常工作。因此，尽量避免使用 !important。
3. 使用类而不是直接设置样式
为了使代码更加模块化和可重用，应该将 CSS 样式定义为类，并在 HTML 元素中使用这些类名来设置样式，而不是直接使用 .css() 方法。
例如：
-------
---------- -
----------------- -------
------------ -----
-
--------
-- ----------------------------------4. 避免使用 DOM 元素计算
在某些情况下，使用 .css() 方法获取元素的样式可能会很慢，特别是当应用于多个元素时。为了提高性能，应该避免使用计算 DOM 元素的方式。
例如，以下代码会强制浏览器重新计算页面上所有元素的位置：
--------------------------- - --- ----- - ---------------- -- --- ---
相反，可以通过缓存值或使用媒体查询等技术来避免这种情况。
示例代码
以下示例演示如何使用 .css() 方法来动态更改元素的外观效果：
--------- -----
------
------
----- ----------------
--------- ------ ----------
-------
------ -
------ ------
------- ------
----------------- ----
-
--------
------- --------------------------------------------------------------------------------
--------
---------------------------- -
---------------------------- -
------------------------------- ---------
---
---
---------
-------
------
---- -----------------
-------
-------当用户单击 #myDiv 元素时，它的背景颜色将从红色变为绿色。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8040