在前端开发中，我们常常需要使用 CSS 样式来布局和美化页面。然而，由于不同浏览器对 CSS3 的支持程度不同，为了确保页面在各种浏览器中正常显示，我们需要添加相应的浏览器前缀。
针对这一问题，jQuery 提供了 .css() 方法，用于设置或返回元素的样式属性值。那么，问题来了：当我们使用 .css() 方法来设置 CSS 样式时，它会自动添加浏览器前缀吗？下面我们来分析一下。
.css() 方法简介
.css() 方法是 jQuery 中一个非常重要的方法之一，我们可以通过它来获取或设置元素的样式属性值。
语法
// 获取样式属性值 $(selector).css(propertyName) // 设置样式属性值 $(selector).css(propertyName, value)
其中，propertyName 表示要获取或设置的样式属性名，value 表示要设置的属性值。
示例
<div class="box">我是一个盒子</div>
// 获取样式属性值
const width = $('.box').css('width') // "100px"
console.log(width)
// 设置样式属性值
$('.box').css('background-color', 'red')浏览器前缀简介
浏览器前缀是指在 CSS 样式属性名前添加特定的标识符，用于区分不同浏览器对同一样式属性的支持情况。常见的浏览器前缀有 -webkit-、-moz-、-o- 和 -ms-。
例如，我们要设置元素 transform 属性的旋转效果，在不同浏览器中需要写不同的代码：
-- -------------------- ---- ------- -- ------- ------- ----- -- ------------------ -------------- -- ------- -- --------------- -------------- -- -- - -- -------------- -------------- -- ----- -- ------------- -------------- -- -------- ------ -- ---------- --------------
.css() 是否自动添加浏览器前缀？
根据 jQuery 官方文档的描述，.css() 方法并不会自动添加浏览器前缀。这意味着，如果我们想要在不同浏览器中都能正常显示我们设置的 CSS 样式，就必须手动添加浏览器前缀。
那么，如何才能方便地添加浏览器前缀呢？这里推荐一个非常实用的库：Autoprefixer。
Autoprefixer 是一个基于 PostCSS 的插件，它可以根据 Can I Use 网站的数据自动添加浏览器前缀，大大减轻了前端开发者的工作量。
安装
npm install autoprefixer postcss-cli -D
使用
在项目根目录下创建 postcss.config.js 文件，添加以下代码：
module.exports = {
plugins: [
require('autoprefixer')
]
}然后，在命令行中执行以下命令即可自动添加浏览器前缀：
npx postcss input.css -o output.css
其中，input.css 表示输入文件的路径，output.css 表示输出文件的路径。
总结
通过本文的介绍，我们了解到了 .css() 方法的基本用法，以及浏览器前缀的作用和常见使用方式。同时，我们也知道了 .css() 方法并不会自动添加浏览器前缀，因此需要借助 Autoprefixer 这样的工具来方便地添加前缀。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29065