嘿，我完全懂你碰到的这个困扰！你说的--s是CSS自定义属性（也叫CSS变量），它和常规的CSS属性不一样，没法直接通过element.style.xxx这种方式来修改，得用专门的API才行。我给你一步步讲清楚怎么搞定：

核心原因 #

常规的element.style对象只能直接访问标准的CSS属性（比如element.style.width、element.style.backgroundColor），而像--s这种自定义属性不属于这个内置列表，所以直接用element.style="--s:1"或者试图访问element.style.s都会失效。

正确的操作方法 #

要操作CSS自定义属性，得用DOM元素的setProperty()和getPropertyValue()方法：

• 设置变量值：元素.style.setProperty('自定义属性名', 新值)
• 获取变量值：元素.style.getPropertyValue('自定义属性名')

针对你的场景的示例代码 #

假设你要根据某个动态变量（比如进度值）来修改--s，可以这么写：

<div id="box"></div>

// 先获取目标元素
const box = document.getElementById('box');

// 初始设置--s的值（替代你之前的style="--s:1"写法）
box.style.setProperty('--s', '1');

// 模拟一个动态变量，比如从其他逻辑拿到的进度值
let dynamicValue = 0.6; // 这里可以换成你实际要用的变量

// 用这个动态变量修改--s
box.style.setProperty('--s', dynamicValue);

额外说明 #

如果你的--s是在全局样式表（比如<style>标签或者外部CSS文件）里定义的，而不是inline style，那要获取它的当前值就得用getComputedStyle()：

const computedStyle = getComputedStyle(box);
const currentSValue = computedStyle.getPropertyValue('--s');

不过你这里是要修改它的值，不管初始定义在哪，用style.setProperty()都会覆盖inline的样式优先级，足够满足需求啦。

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