如何通过按钮点击动态修改CSS object-position属性的Y值

嘿，我明白你想实现的效果啦——通过按钮切换堆叠视频的不同视角，这个思路挺巧的！你之前用CSS变量的方向完全是对的，但操作方法有点小误区，我来给你捋捋正确的实现方式：

首先，先把基础的CSS和HTML结构理清楚：

第一步：正确配置CSS变量与视频样式 #

你的:root定义变量是对的，但要确保视频元素的CSS里正确引用变量，而且必须加上object-fit: none——这步很关键，不然视频会自动拉伸适配容器，我们要的是固定裁剪原视频的指定区域，所以得用none保持原像素尺寸：

:root {
  --camposition: 0px;
}

#stackedVideo {
  width: 1280px; /* 对应单视角视频的宽度 */
  height: 720px; /* 只显示单个视角的高度 */
  object-fit: none; /* 禁止视频自动拉伸/缩放 */
  object-position: 0 var(--camposition); /* 用CSS变量控制Y轴位置 */
}

第二步：写一个简单的JS函数来修改变量 #

你之前尝试用getElementById找--camposition是错的，因为它是CSS变量不是DOM元素。正确的做法是通过document.documentElement.style.setProperty()来修改:root里的变量值。我们可以把这个逻辑封装成一个函数，按钮点击时调用就行：

HTML按钮部分

<video id="stackedVideo" controls>
  <source src="你的堆叠视频文件.mp4" type="video/mp4">
</video>

<button type="button" onclick="setCamPosition(0)">主视角</button>
<button type="button" onclick="setCamPosition(-720)">Guests</button>
<button type="button" onclick="setCamPosition(-1440)">第三个视角</button>

JS函数部分

function setCamPosition(yValue) {
  // 把传入的数值转成px单位，设置到CSS变量上
  document.documentElement.style.setProperty('--camposition', `${yValue}px`);
}

为什么之前的方法不行？ #

你用.innerHTML去修改变量是找错了对象——CSS变量是存储在样式上下文里的，不是DOM元素的HTML内容，所以要用专门的setProperty方法来修改:root这个全局样式根节点的变量值。

这样调整之后，点击按钮就能瞬间切换视频显示的不同堆叠区域了，完全符合你的需求！

对了，要是想让体验更好，还可以给当前选中的按钮加个高亮样式（比如改个背景色），不过这属于锦上添花的功能，你要是需要的话可以再研究~

备注：内容来源于stack exchange，提问作者Chris W