如何使用JavaScript移除MxGraph节点的CSS样式

你之前通过mxUtils.setStyle添加的样式属于mxGraph单元格内部样式串存储的键值对，不是普通DOM层面的CSS属性，直接修改DOM样式无法持久生效，可通过以下两种方式正确移除：

• 方法1：沿用mxUtils.setStyle，将目标属性值设为null
  和你之前添加样式的调用逻辑完全一致，仅需把要移除的属性对应值传null即可：

  // 获取节点当前样式
  let style = node.style;
  // 将strokeColor属性置为null，即移除该样式配置
  style = mxUtils.setStyle(style, 'strokeColor', null);
  
  // 包裹模型事务保证视图正常刷新
  const model = self.graph.getModel();
  model.beginUpdate();
  try {
    model.setStyle(node, style);
  } finally {
    model.endUpdate();
  }
  

• 方法2：使用mxUtils.removeStyle直接删除指定样式键
  这个API专门用于从样式串中删除指定键值对，语义更直观：

  // 获取节点当前样式
  let style = node.style;
  // 直接移除strokeColor对应的样式项
  style = mxUtils.removeStyle(style, 'strokeColor');
  
  // 包裹模型事务保证视图正常刷新
  const model = self.graph.getModel();
  model.beginUpdate();
  try {
    model.setStyle(node, style);
  } finally {
    model.endUpdate();
  }
  

注意：不要直接修改节点对应渲染DOM的CSS属性，mxGraph触发重绘时会用内部存储的样式覆盖DOM修改，所有样式调整都要通过模型操作完成。如果你之前是通过cssClass键给节点绑定的自定义CSS类，移除逻辑完全一致，仅需把操作的样式键替换为cssClass即可。

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