Question

在DOM元素样式上设置多个转换属性时，浏览器不会显示所有设置的属性（-webkit-，ms和常规）-例如：

element.style.tranform = 'rotate(90deg)';
element.style.webkitTranform = 'rotate(90deg)';
element.style.msTranform = 'rotate(90deg)';

将产生以下内联样式属性

<div style="transform:rotate(90deg)" ></div>;

这意味着浏览器未设置所有属性，而是仅使用其中一个。

这是一个问题，因为我们必须将HTML原样发送到服务器端才能生成PDF。因此，我们找到了一种可行的解决方法-使用element.setAttribute('style','transform...-webkit- etc...');

上述方法行得通，但是我们每次都必须重建样式属性，并且仅在设置了所有其他属性之后才必须应用转换，这并不是很优雅。

有人知道如何解决此问题吗？

谢谢！

Answer 1

我认为您已经找到了解决方法：使用setAttribute。它不是很漂亮，但是带有前缀属性，您不能相信来自浏览器X的HTML可以在浏览器Y中使用，因为在为{{1}生成文本时，没有理由浏览器X包括无效的（从其角度而言）属性。 }属性的值。

通过变通办法，您至少需要注意以下两点：

您已在目标浏览器中进行了仔细测试。我认为所有浏览器均忠实保留您使用style设置的内容（受下面的＃2约束），但是...测试。：-）
在完成setAttribute之后，请确保代码中没有任何内容通过style对象设置样式，因为这将使浏览器（从其角度看）无效样式文字。例如，在Chrome，Firefox，Edge和Safari（至少）上，当我设置setAttribute时，以下内容将丢弃无效的foo: bar样式：

fontWeight

var element = document.getElementById("element");
element.setAttribute("style", "foo: bar");
console.log("before using style:", element.getAttribute("style"));
element.style.fontWeight = "bold";
console.log("after using style: ", element.getAttribute("style"));

JS样式的Webkit转换未以内联样式显示

1 个答案: