如何选择CSS变量并将样式值分配给另一个元素

汉堡·萨沙(Burger Sasha)

我正在寻找一种方法来选择--bgcolor要悬停的元素的css变量并将该值分配给bodycss

这是我目前的尝试,有什么建议吗?

var body = document.querySelector('body');
var boxList = document.querySelectorAll('.box');

  var box = Array.prototype.slice.call(boxList);
  box.forEach(function (el) {
    el.addEventListener('mouseover', ()=> {
      var newbg = el.style.background;
      body.style.background = newbg;
    });
  });
body {
  background: var(--bgcolor);
}

.box {
  width: 80px;
  height: 80px;
  margin: 10px;
  background: var(--bgcolor);
  display:inline-block;
}
<body>
  <div class="box" style="--bgcolor: #FF0000"></div>
  <div class="box" style="--bgcolor: #00FF00"></div>
  <div class="box" style="--bgcolor: #0000FF"></div>
</body>

马埃里·阿里(Maheer Ali)

您可以使用getComputedStyle()如果要获取变量,则需要getPropertyValue()与computeStyle一起使用否则,您可以直接background从calculatedStlye获取属性

var body = document.querySelector('body');
var boxList = document.querySelectorAll('.box');

  var box = Array.prototype.slice.call(boxList);
  box.forEach(function (el) {
    el.addEventListener('mouseover', ()=> {
  
      var newbg = window.getComputedStyle(el).getPropertyValue('--bgcolor')
      
      body.style.background = newbg;
    });
  });
body {
  background: var(--bgcolor);
}

.box {
  width: 80px;
  height: 80px;
  margin: 10px;
  background: var(--bgcolor);
  display:inline-block;
}
<body>
  <div class="box" style="--bgcolor: #FF0000"></div>
  <div class="box" style="--bgcolor: #00FF00"></div>
  <div class="box" style="--bgcolor: #0000FF"></div>
</body>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用扫描仪值分配给另一个类的变量?

在Python中将一个变量的值分配给另一个变量时会发生什么?

如何在shell脚本中将一个变量值分配给另一个变量

如何将另一个文件中的变量分配给类常量?

我可以将CSS变量分配给另一个变量吗?

如何从对象/模型获取结果并将该值分配给文本框或另一个变量。类似于将结果分配给列表框

在函数中获取变量并将其分配给其范围之外的另一个变量

如何将Angular @Input值分配给另一个变量并填充到子代中?

如何将公式的值(包含变量)分配给另一个变量

JavaScript:如何将button元素的值分配给另一个div元素?

比较数据框内的日期并将值分配给另一个变量

将struct的第一个变量分配给另一个

有人可以解释如何从选择中获取列的值并将其分配给postgres中的另一个选择

如何将变量列表分配给另一个列表

如何从另一个类更改或将值分配给私有变量JTextField?

bash脚本,从另一个shell执行shell并将结果分配给变量

如何在PHP的另一个开关案例块中检索分配给一个开关案例块中变量的值?

Python将值从一个变量分配给另一个

如何将*附加到字符串并将预准备的SQL查询分配给另一个变量?即,(从*中选择*。)

如何将一个JavaScript文件中的变量分配给另一个JS File?

python即使将输入变量分配给另一个变量,如何更改它的值?

如何一次遍历 2 个数组并将数组中的颜色分配给另一个数组的每个值

Pandas 数据框:搜索并将唯一值分配给另一个数据框

如何通过 BASH 主机命令一个变量并将答案分配给另一个变量

如何将我的选择选项分配给另一个变量

HTML - 如何将文本值分配给另一个属性的值?

如何从组件中获取变量值并将其分配给 vuejs 中另一个组件中的变量

在 bash 变量中应用 sed 并将其分配给另一个

从列表中取出一个元素并将其分配给一个变量