用纯 JavaScript 转换 CSS 不起作用

Question

在通过 ID 获取元素后，我尝试使用 javascript 转换我的 div。但我什么都没有，它不起作用。

这是我的代码：

const sliderA = document.getElementById("obSlideTop1");
const sliderB = document.getElementById("obSlideTop2");
const flame = document.getElementById("THST");
flame.addEventListener('mouseover', () => {
  sliderA.style.transform = "translate(-3vw, -343vh);"

  sliderB.style.transform = "translate(3vw, -343vh);"
})

但是当我尝试使用 .backgroundColor 或 .opacity 之类的其他东西进行样式设置时，它仍然适用于它们。 object.style.transform 是唯一对我有问题的东西。

const sliderA = document.getElementById("obSlideTop1");
const sliderB = document.getElementById("obSlideTop2");
const flame = document.getElementById("THST");
flame.addEventListener('mouseover', () => {
  sliderA.style.transform = "translate(-3vw, -343vh);"
  sliderA.style.backgroundColor = "rgb(124, 1, 124)";
  sliderA.style.opacity = ".5"

  sliderB.style.transform = "translate(3vw, -343vh);"
  sliderB.style.backgroundColor = "rgb(233, 33, 33)";
  sliderB.style.opacity = ".5";

  console.log(sliderA,sliderB)
})

它有控制台输出：

<div id="obSlideTop1" style="background-color: rgb(124, 1, 124); opacity: 0.5;"></div> 
<div id="obSlideTop2" style="background-color: rgb(233, 33, 33); opacity: 0.5;"></div>

Answer 1

这是因为"translate(-3vw, -343vh);" 是一个无效的转换值，因为字符串中的分号;。

const sliderA = document.getElementById("obSlideTop1");
const sliderB = document.getElementById("obSlideTop2");
const flame = document.getElementById("THST");
flame.addEventListener('mouseover', () => {
  sliderA.style.transform = "translate(-3vw, -343vh)";
  sliderA.style.backgroundColor = "rgb(124, 1, 124)";
  sliderA.style.opacity = ".5"

  sliderB.style.transform = "translate(3vw, -343vh)";
  sliderB.style.backgroundColor = "rgb(233, 33, 33)";
  sliderB.style.opacity = ".5";

  console.log(sliderA,sliderB)
})

<div id="obSlideTop1" style="background-color: rgb(124, 1, 124); opacity: 0.5;"></div> 
<div id="obSlideTop2" style="background-color: rgb(233, 33, 33); opacity: 0.5;"></div>
<button id="THST">flame</button>