使用纯JavaScript设置CSS transform属性失效，其他样式设置正常

核心根因 #

你给transform属性赋值的字符串末尾多了多余的分号，通过element.style.xxx方式给样式属性赋值时，属性值不需要携带末尾的分号，部分严格模式的浏览器遇到非法格式的属性值会直接丢弃该次赋值，这就是为什么其他不带多余分号的样式（backgroundColor、opacity）可以正常生效，只有transform设置失败。

修复方案 #

1. 首先移除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)
})

2. 如果修改后依然不生效，排查以下场景：

• 检查CSS样式表中是否给#obSlideTop1、#obSlideTop2的transform属性设置了!important规则，CSS中带!important的规则优先级高于普通行内样式，会覆盖行内设置的transform值
• 检查两个元素的display属性，transform仅对块级、inline-block、flex等盒模型元素生效，如果是display: inline状态，transform设置不会生效，调整display属性即可
• 如果需要兼容极低版本的webkit内核浏览器，可以补充前缀写法：

sliderA.style.webkitTransform = "translate(-3vw, -343vh)"
sliderB.style.webkitTransform = "translate(3vw, -343vh)"

验证方法 #

赋值完成后在回调中打印sliderA.style.transform，如果输出了你设置的translate值，说明赋值已经生效，可以正常写入行内样式。

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