var 实现样式变量

刀刀

0字

0分钟

2026/8/16

一个父盒子内有一个子盒子小圆，该小圆在父盒子内做动画左右来回平移。

html

<div class="box">
  <div class="item"></div>
</div>

CSS 思路

小圆从父盒子左侧移动到右侧，通过 CSS 的运算方法写为如下的方式：

css

calc(父元素宽度 - 子元素宽度)

子元素宽度可以获取到，自身 100% 即可；父元素的宽度无法通过 CSS 获取到，需要依赖 JS，而 JS 做动画不够 CSS 方便。

二者结合：JS 获取到父元素宽度后告诉 CSS 来使用。

CSS 实现

JS 获取父盒子的宽度：

const container = document.querySelector('.container')
const w = container.clientWidth

通过 container.style.setProperty() 方法设置，代码：

container.style.setProperty('--w', w + 'px')

后续即使父元素宽度改变，也能通过该方法实时获取最新的数据。

现在 CSS 可以通过 var 获取变量值，设置动画。代码：

css

@keyframes move {
  50% {
    transform: translateX(calc(var(--w) - 100%));
  }
}

.container .item {
  animation: move 3s linear infinite;
}

CSS 说在最后

不一定在 js 获取父元素宽度，可以先设置一个变量，然后在 template 中使用动态样式设置，最后通过 css 的 var() 方法来获取。

vue

<script setup>
const w = ref()

onMounted(() => {
  const container = document.querySelector('.container')
  w.value = container.clientWidth
})
</script>

<template>
  <div :style="{ '--w': w + 'px' }"></div>
</template>

CSS 总体效果

跳转预览：点击跳转

贡献者

平安喜乐

v_duyilin

duyidao

刀刀

页面历史

最后编辑于 1 天前

查看完整历史

var 实现样式变量 ​

CSS 思路 ​

CSS 实现 ​

CSS 说在最后 ​

CSS 总体效果 ​

贡献者