如何让jQuery直接修改CSS值，而非添加内联样式？

嘿，我完全懂你现在的纠结——用jQuery做自定义网格，结果每个元素都被加上了内联width样式，既不优雅，还容易和CSS里的规则冲突。咱们来聊聊怎么搞定这个问题：

首先得明确：你原来用的$(this).css("width", ...)方法，本质就是直接修改元素的style属性，所以必然会生成内联样式。要避开内联，核心思路是修改样式表而非单个元素的style属性。

方案1：动态生成CSS样式规则（最推荐） #

我们可以创建一个<style>标签，遍历所有带tul-*类的元素，把对应的宽度规则批量写入样式表。这样所有样式都集中在一处，不会出现内联代码：

// 先创建一个style元素并添加到头部
const styleElement = $('<style></style>').appendTo('head');
// 用Set来收集唯一的tul-类，避免重复生成相同规则
const uniqueTulClasses = new Set();

// 遍历所有包含tul-的元素，提取完整的tul-数字类
$("[class*='tul-']").each(function() {
  // 用正则准确匹配tul-开头的数字类（比如tul-5、tul-10都能匹配）
  const matchedClass = $(this).attr('class').match(/tul-\d+/)[0];
  uniqueTulClasses.add(matchedClass);
});

// 遍历收集到的类，生成对应的CSS规则
uniqueTulClasses.forEach(className => {
  // 提取类名里的数字部分
  const colNumber = className.split('-')[1];
  // 写入样式规则
  styleElement.append(`.${className} { width: ${100 / colNumber}%; }`);
});

这个方案还顺便解决了你原代码里的小bug——原代码用substring(4,5)只能提取一位数，比如tul-10会被错误识别成tul-1，导致宽度变成100%。用正则匹配就能完美处理多位数的情况。

方案2：结合CSS变量（更灵活） #

如果你想保留类名或用data属性传递参数，也可以用CSS变量来分离逻辑和样式，虽然还是会有内联变量，但比直接写width优雅很多：

1. 先在CSS里定义基础规则：

[data-tul-col] {
  width: calc(100% / var(--tul-col-num));
}

2. 调整HTML结构，用data属性传递列数：

<div data-tul-col="5"></div>

3. 用jQuery给元素设置CSS变量：

$("[data-tul-col]").each(function() {
  const colNum = $(this).data('tul-col');
  $(this).css('--tul-col-num', colNum);
});

这样内联的只是变量值，样式逻辑还是在CSS里，后续调整样式也更方便。

为什么原代码会生成内联样式？ #

再啰嗦一句：jQuery的.css()方法本质就是操作DOM元素的style属性，所以必然会把样式写在元素标签里。要彻底避免内联，就得从样式表层面入手，方案1就是最直接的实现方式。

内容的提问来源于stack exchange，提问作者Shahriar