在非mozilla浏览器中应用MozTransform（通过JS）

Question

背景信息

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

我介绍了一种绘制直线的方法，也可以在任何角度倾斜。我通过使用没有高度的普通div并仅使用底部边框来完成此操作。当我将CSS rotate transform应用于div时，它可以在任何程度上成角度。

问题

在设计器中，当用户更改线条的角度（斜率）时，我通过Javascript应用样式。像这样：

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

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

我试过的方法

我试图以多种方式解决这个问题：

• 我尝试通过style属性进行设置，而不是通过style.cssText属性进行设置。它不起作用。
• 我可以在HTML生成期间使用div的outerHTML并插入属性，但这是一件非常混乱的事情。
• 我可以通过为常用角度（0,45,90,135,180等）提供CSS类来妥协，但我不想太快放弃。

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

提前致谢，
Shesh

Answer 1

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

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

Answer 2

我使用轻量级jQuery插件进行轮换：http://code.google.com/p/jqueryrotate/。它非常易于使用，您可以使用以下命令返回任何html元素的当前天使：.getRotateAngle()

文档：http://code.google.com/p/jqueryrotate/wiki/Documentation