javascript - 在非 mozilla 浏览器中应用 MozTransform(通过 JS)

Question

背景信息

我正在开发一个可视化表单设计器，没有编码经验的人可以在其中拖动表单域来创建表单并打印它们或另存为 HTML 文档。

我介绍了一种绘制直线的方法，该直线也可以任意倾斜。我通过使用没有高度且仅使用底部边框的普通 div 来实现此目的。当我将 CSS rotate transform 应用于 div 时，它可以任意倾斜。

问题

在设计器中，当用户更改线的 Angular (斜率)时，我通过 Javascript 应用样式。像这样:

lineWrapper.style.webkitTransform = "rotate(" + angle + "deg)";
lineWrapper.style.MozTransform = "rotate(" + angle + "deg)";

当用户想要将表单保存为 HTML 时，我获取 outerHTML 并将其返回给用户。在这里，如果我使用的是 Chrome，则 MozTransform 属性不存在于生成的 HTML 中，如果我使用的是 Firefox，则 webkitTransform 不存在。

我尝试过的方法

我试图通过多种方式解决这个问题:

• 我尝试通过 style.cssText 属性设置它，而不是通过 style 属性设置它。它没有用。
• 我可以在 HTML 生成期间获取 div 的 outerHTML 并插入属性，但这是一件非常麻烦的事情。
• 我可以通过为常用 Angular (0、45、90、135、180 等)提供 CSS 类来做出妥协，但我不想过快放弃。

所以，我想问问你们 - 有没有更好的方法来解决这个问题？

提前致谢，
谢什

Answer 1

不要使用“.style”设置样式，而是使用“setattribute”。它应该在两个浏览器中都添加。此外，这将允许您使用一个命令应用样式。

 lineWrapper.setattribute("style", "-webkit-transform : rotate(" + angle + "deg); -moz-transform : rotate(" + angle + "deg)");