Angular 5下编程式转换HTML元素及样式不生效问题求助

首先看你代码里最明显的问题：transform的字符串没有正确闭合！你写的 "translate( 0px," + this.translateY + "px..." 最后少了一个闭合的括号 )，这会导致浏览器无法识别这个无效的CSS样式，自然不会在元素面板里更新，而你控制台输出的this.translateY是正确的，因为那部分逻辑没问题。

第一步：修复语法错误 #

把那行代码改成正确的闭合形式，推荐用ES6模板字符串来避免拼接错误：

onDragStart(element: HTMLElement) {
  this.elementRef = element;
  const style = window.getComputedStyle(element);
  const matrix = new WebKitCSSMatrix(style.webkitTransform);
  this.translateY = matrix.m42;
  console.log(this.translateY) // 输出：85，因为当前Y位置为85px
  // 修复字符串闭合，用模板字符串更清晰
  element.style.transform = `translate(0px, ${this.translateY}px)`;
}

其他可能的排查点 #

• 前缀兼容性：WebKitCSSMatrix和webkitTransform都是webkit内核浏览器的前缀写法，如果要兼容Firefox、Edge等其他浏览器，可以换成标准的DOMMatrix和transform属性：

  const matrix = new DOMMatrix(style.transform);
  this.translateY = matrix.f; // DOMMatrix里的f对应Y轴平移值
  

• 元素是否正确获取：确保传入的element确实是你要操作的DOM元素，没有出现null或者获取错误的情况，可以在开头加个判断：

  if (!element) return;
  

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