CSS 与类名：两种缝合针法

3.3 CSS 与类名：两种缝合针法

改外观的两条路要提前分清：改类名是批量换装——样式细节全部托付给样式表，代码里只切换身份标签；改内联样式是单点精修——某个值由计算得出、没法提前写进样式表时才动针。上一节改的是档案，这一节改的是脸面；两节合起来，元素的"内容与外观"就都能由代码掌控了。

本节摘要：类名方法四件套 addClass、removeClass、toggleClass、hasClass 对应原生 classList 的增删切换与查询；css 方法读写内联样式，批量赋值用对象形式，读到的永远是计算后的值；尺寸位置族（width、offset、scrollTop 等）是 css 的高频替身。

类名四件套与 classList 对照

$('#queue li').addClass('seen');          // 追加，原有类保留
$('.done').removeClass('done urgent');    // 可一次摘掉多个
$('.item').toggleClass('flag', cond);     // 依布尔切换：真加假摘
$('.urgent').hasClass('flag');            // 返回布尔，只看集合第一个
​

原生对照一一对应，几乎可以背下来：

语法上的小差异只有一处传参形态：jQuery 用空格串，原生用多个参数。语义完全同构——类名操作在今天已经是原生 API 的主场。

css 方法：单点精修的三种姿势

// 读：拿到的是计算后的值，带单位
$('#ward').css('background-color');    // 例如 'rgb(250, 251, 253)'

// 写一：单键单值，数值类属性可省单位
$('.urgent').css('border-width', 3);   // 自动补 px

// 写二：对象批量，一次缝合多处
$('.urgent').css({
  color: '#C0392B',
  'font-weight': 'bold',
  paddingLeft: 12
});
​

三个易碎点。其一，读值永远来自计算样式——样式表、继承、内联层层叠加后的最终结果，不是你在某处写的那个字面量。其二，驼峰与连字符写法都接受（paddingLeft 与 padding-left 等价），但对象里含连字符的键要加引号。其三，css 写入只落在内联样式层，优先级高于样式表，覆盖它得用 !important 或干脆改类名——这也是"精修要节制"的技术原因：内联样式叠多了，后面没人接得住。

一条实战：急症高亮的两种实现

需求：急症患者条目要红字加粗。走一遍两条路，看它们各自的代价。

路线甲，改类名——样式表里先备好针法：

.flag { color: #C0392B; font-weight: bold; }
​

$('.urgent').addClass('flag');     // 代码只管挂标签
$('.urgent').removeClass('flag');  // 撤销同样一行
​

路线乙，改内联——所有细节写进代码：

$('.urgent').css({ color: '#C0392B', 'font-weight': 'bold' });
// 撤销时必须逐项还原，漏一项就留疤
$('.urgent').css({ color: '', 'font-weight': '' });
​

背景相同的两条路，结果差异在维护面：甲方案的撤销是幂等的一行，乙方案要逐项对账；设计师改配色时，甲只动样式表，乙要翻遍脚本。凡是能提前确定的样式进样式表，代码里只切类名——把 css 方法留给"运行时算出来的值"，比如根据剩余座位数动态调背景深浅。这条分工也是第 5 章动画编排的前置共识。

尺寸与位置：css 的高频替身

几何查询几乎不该用 css('width')——它返回带单位的字符串，而且拿到的可能是 auto 解析后的结果。专用方法返回数值，语义也拆得更细：

var w = $('#ward').width();            // 内容区宽度，纯数字
var w2 = $('#ward').outerWidth(true);  // 含内边距、边框、外边距

var off = $('.urgent').offset();       // 相对文档：left、top
var pos = $('.urgent').position();     // 相对定位父级：left、top

$('#log').scrollTop(300);              // 读写滚动位置
​

原生对照里，getBoundingClientRect 给出视口坐标，加滚动量换算才是文档坐标；el.offsetWidth 是含边框的整数宽度。jQuery 的 offset 本质上就是这套换算的封装——懂了原生算法，类库方法只是省了两行。

要点复盘

• 类名四件套对应 classList 四个方法，批量换装优先走这条路。
• css 读取给计算值、写入落内联层；对象批量写法里连字符键要加引号。
• 能提前确定的样式进样式表，代码只切类；css 留给运行时算出的值。
• 撤销内联样式要逐项置空，维护成本高于摘类名，这就是"精修要节制"的原因。
• 几何查询用 width、offset、position、scrollTop，别用 css('width') 硬读。

外观归位。下一节动真正的大刀：往文档里插入新组织、移植既有节点、切除多余部分——结构与内容层面的全套修改术。