能，text-align 支持 CSS 变量赋值，但需显式声明 text-align: var(--align);，且变量值必须为合法关键字（left/right/center/justify/start/end），IE 不支持；JS 动态修改需用 style.setProperty() 触发重绘。
text-align 能用 CSS 变量控制吗？能，但有前提
可以，text-align 本身支持用 CSS 变量赋值，但浏览器不会自动响应变量变化——除非你用 :root 或元素级 style 动态改值，且该元素的 text-align 确实声明为 var(--align)。常见错误是只定义了变量、没在样式里引用，或者用了不支持的值（比如 var(--align, left) 中 --align 是空或非法字符串，会退回到 left，但不会报错，也不触发重排）。
- 必须显式写
text-align: var(--align);，不能只靠 JS 改变量就生效 -
--align的合法值只有left/right/center/justify/start/end，其他字符串会导致失效（回退到浏览器默认或继承值） - IE 完全不支持 CSS 变量，
text-align会直接忽略整条声明
怎么用 JS 动态切换 text-align 值
核心是两步：定义变量 + 触发重计算。推荐直接操作 style.setProperty()，避免污染全局 :root 影响其他组件。
- 给目标元素设
style="text-align: var(--align);"，或在 class 里写text-align: var(--align); - JS 中调用
el.style.setProperty('--align', 'right');，浏览器会立即重绘文本对齐 - 不要用
el.style.align = 'right'——align不是标准 DOM 属性，无效 - 如果需批量控制，建议用
dataset+CSS.registerProperty（仅 Chrome 110+），但兼容性太差，不实用
const box = document.querySelector('.text-box');
box.style.setProperty('--align', 'center');
text-align: start / end 和 left / right 的区别在哪
这是 RTL（从右向左）场景的关键差异。start / end 是逻辑值，随 direction 和 writing-mode 自动适配；left / right 是物理值，固定边框方向。用变量时若混用，容易在阿拉伯语或希伯来语页面出错。
- 页面
dir="rtl"时，text-align: start对齐到右边，left仍对齐到左边（物理左） - 变量名建议带语义，比如
--text-align-mode: start;比--align: left;更安全 - 服务端渲染或 SSR 场景下，若未同步设置
dir，start/end可能表现意外
为什么有时候改了变量，text-align 就是不更新
最常见原因是层叠优先级或变量未生效。CSS 变量不是“绑定”，只是文本替换；如果某处更具体的规则（比如内联 style="text-align: right"）覆盖了 var(--align)，那变量再怎么改也无效。
立即学习“前端免费学习笔记（深入）”；
- 检查 computed styles，确认
text-align实际值是不是var(--align)被解析后的结果，而不是initial或inherit - 用
getComputedStyle(el).textAlign查看真实值，如果是left但期望是center，说明变量根本没被读取 - 变量作用域错了：在子元素里改
:root变量，父元素用了var(--align)，但子元素自己又写了text-align: left，就会覆盖 - 别忘了加单位或引号——
--align: 'center'是错的，CSS 变量值不加引号
