本文将介绍 jQuery 中的 css() 和 cssHooks() 方法，通过这些方法操作 CSS，可以通过 css() 获取匹配元素的 CSS 属性值和设置对应的 CSS 属性。
在 jQuery 中，css() 方法用于操作元素的样式，支持获取样式、设置单个样式、设置多个样式、和函数动态赋值四种用法。如下：
用于获取匹配元素计算后的样式值（支持行内样式、内部样式、外部样式），注意，只能获取第一个匹配元素的样式。
语法：
$(selector).css(样式名)示例：
<style>
.myClass {
padding: 10px;
box-shadow: inset 0 0 5px red;
}
</style>
<p class="myClass">Hello JQuery</p>运行如下 jQuery 代码：
var obj = $('.myClass');
log.info('元素字体大小：' + obj.css('font-size'),
'元素背景颜色：' + obj.css('background-color'));
// 输出如下：
// 元素字体大小：16px 元素背景颜色：rgba(0, 0, 0, 0)用于给匹配的所有元素设置单个 CSS 样式，如 color、background 等。注意，数值可省略单位（默认 px），字符串需写全单位。
语法：
$(selector).css(样式名, 样式值)示例：
<p class="myClass">Hello JQuery</p>运行如下 jQuery 代码：
$('.myClass').css('color', 'red');
$('.myClass').css('font-size', '22px');上述代码将所有拥有 myClass 类的元素的字体设置为红色，字体大小设置为 22px。
css() 方法还支持一次性设置多个 CSS 样式，代码更简洁。注意，样式名称可以采用驼峰写法（fontSize）或短横线写法（font-size）。
语法：
$(selector).css({ 样式键值对 })示例：
<p class="myClass">Hello JQuery</p>运行如下 jQuery 代码：
$('.myClass').css({
'color': 'red',
'background': '#ccc',
'font-size': '12px'
});上述代码将所有拥有 myClass 类的元素的字体设置为红色、背景设置为 #ccc、字体设置为 12px。
用于根据元素的索引或原有样式值，动态计算新样式。语法如下：
$(selector).css(样式名, function(index, oldValue){})回调函数参数说明：
index：当前元素在匹配集合中的索引（从 0 开始）
oldValue：当前元素的原有样式值
示例：
<p class="myClass">Hello JQuery</p>运行如下 jQuery 代码：
$('.myClass').css('height', function(index, oldValue){
return parseInt(oldValue) * 2;
});上述代码将所有拥有 myClass 类的元素的高度设置为原来高度的两倍。
jQuery.cssHooks() 是 jQuery 提供的 CSS 属性钩子系统，用于自定义浏览器对 CSS 属性的读写逻辑，统一不同浏览器的兼容性差异、扩展原生 CSS 不支持的属性，或封装复杂的样式操作。
简单来说，jQuery.cssHooks() 能让你像使用原生 CSS 属性一样，使用自定义的“伪 CSS 属性”，jQuery 会自动调用你定义的读写逻辑。
语法如下：
// 定义 cssHook
$.cssHooks['自定义属性名'] = {
// 获取样式时执行
get: function(elem, computed, extra) {
// 返回属性值
},
// 设置样式时执行
set: function(elem, value) {
// 处理样式设置逻辑
}
};参数说明：
elem：当前操作的 DOM 元素
computed：布尔值，是否获取计算后的样式
extra：额外参数，如动画相关配置
value：设置样式时传入的属性值
示例：
<p class="myClass">Hello JQuery</p>运行如下 jQuery 代码：
// 为 css 的 transform 属性添加兼容处理，自动添加浏览器前缀
$.cssHooks['someCSSProp'] = {
// 获取样式
get: function( elem, computed, extra ) {
log.debug('触发了 someCSSProp 的 get 方法', elem, computed, extra );
var prefixes = ['webkitTransform', 'MozTransform', 'msTransform', 'transform'];
for (var i = 0; i < prefixes.length; i++) {
if (elem.style[prefixes[i]] !== undefined) {
return elem.style[prefixes[i]];
}
}
},
// 设置样式
set: function( elem, value ) {
// WebKit 内核浏览器的前缀
elem.style.webkitTransform = value;
// Mozilla 基金会（Firefox 开发商）的前缀
elem.style.MozTransform = value;
// Microsoft 微软的前缀
elem.style.msTransform = value;
// 这是 W3C 官方最终标准
elem.style.transform = value;
}
};
// 使用：直接调用，无需关心前缀
$('.myClass').css('transform', 'rotate(45deg)');
log.info($('.myClass').css('transform')); // 获取旋转值上述代码将对 transform 样式进行兼容处理，这就不需要我们像这样去编写 CSS 处理样式兼容：
.box {
/* IE9 */
-ms-transform: rotate(45deg);
/* Chrome / Safari 旧版 */
-webkit-transform: rotate(45deg);
/* 标准：所有现代浏览器 */
transform: rotate(45deg);
}当我们执行 $('.myClass').css('transform', 'rotate(45deg)') 时将会自动处理兼容问题。
下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
sup {color: red; font-size: 12px; background: transparent !important;}
/* 效果 */
.myClass {
padding: 10px;
box-shadow: inset 0 0 5px red;
}
</style>
</head>
<body>
<div class="app">
<h3>CSS</h3>
<p class="myClass">Hello JQuery</p>
</div>
<div>
<!-- css(name|pro|[,val|fn])1.9* 访问匹配元素的样式属性 -->
<!-- 获取元素样式 -->
<button type="button" onclick="
var obj = $('.myClass');
// 获取样式属性，例如：font-size, background-color 等
log.info('元素字体大小：' + obj.css('font-size'),
'元素背景颜色：' + obj.css('background-color'));
">$('.myClass').css()<sup>1.9*</sup></button>
<!-- 设置单个样式 -->
<button type="button" onclick="
// 设置样式属性，例如：color 等
$('.myClass').css('color', 'red');
$('.myClass').css('font-size', '22px');
">$('.myClass').css('color', 'red')</button>
<!-- 设置多个样式 -->
<button type="button" onclick="
// 同时设置多个样式属性，例如：color, background 等
$('.myClass').css({
'color': 'red',
'background': '#ccc',
'font-size': '12px'
});
">$('.myClass').css({...})</button>
<!-- 函数动态赋值 -->
<button type="button" onclick="
$('.myClass').css('height', function(index, oldValue){
return parseInt(oldValue) * 2;
});
">$('.myClass').css(function(){})</button>
<!-- jQuery.cssHooks() 直接向 jQuery 中添加钩子，用于覆盖设置或获取特定 CSS 属性时的方法，
目的是为了标准化 CSS 属性名或创建自定义属性 -->
<button type="button" onclick="
// 添加自定义的CSS钩子
// 首先，检查是否支持 cssHooks
if ( !$.cssHooks ) {
log.error('此插件运行需要 jQuery 1.4.3 或更高版本');
return;
}
// 统一处理带浏览器前缀的 transform 属性
$.cssHooks['someCSSProp'] = {
// 获取样式
get: function( elem, computed, extra ) {
log.debug('触发了 someCSSProp 的 get 方法', elem, computed, extra );
var prefixes = ['webkitTransform', 'MozTransform', 'msTransform', 'transform'];
for (var i = 0; i < prefixes.length; i++) {
if (elem.style[prefixes[i]] !== undefined) {
return elem.style[prefixes[i]];
}
}
},
// 设置样式
set: function( elem, value ) {
// WebKit 内核浏览器的前缀
elem.style.webkitTransform = value;
// Mozilla 基金会（Firefox 开发商）的前缀
elem.style.MozTransform = value;
// Microsoft 微软的前缀
elem.style.msTransform = value;
// 这是 W3C 官方最终标准
elem.style.transform = value;
}
};
// 使用：直接调用，无需关心前缀
$('.myClass').css('transform', 'rotate(45deg)');
log.info($('.myClass').css('transform')); // 获取旋转值
">jQuery.cssHooks()</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098