Question

我想将CSS3转换样式应用于GWT中的图像。例如

imageZoom.getElement().getStyle().setProperty("-webkit-transform", "translate3d("+x+"px, "+y+"px, 0px)");

其中x和y是图像中鼠标光标的坐标。它将错误显示为
Casused By java.lang.AssertionError：样式名称应采用驼峰格式。
我将样式属性重命名为以下

我还使用了CamelCase Convertor，但它显示的结果与输入的结果相同。

先谢谢

Answer 1

我不确定具体的GWT，但在JavaScript中你使用前缀时删除了连字符。 webkit和ms是小写的，但O和Moz是大写的。以下是一些通过vanilla JavaScript在WebKit中设置转换的代码：

var el = document.getElementById("test");

el.style.webkitTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';

以下是其他前缀和无前缀。请注意，无前缀以小写开头：

el.style.MozTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.msTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.OTransform = 'translate3d(100px, 100px, 15px) rotate(10deg)';
el.style.transform = 'translate3d(100px, 100px, 15px) rotate(10deg)';

以下是该动作的演示：http://jsfiddle.net/qScux/

修改

在GWT中，那将是：

imageZoom.getElement().getStyle().setProperty("webkitTransform", "translate3d("+x+"px, "+y+"px, 0px)")

Answer 2

以下是GWT检查驼峰的代码：

private void assertCamelCase(String name) {
    assert !name.contains("-") : "The style name '" + name
    + "' should be in camelCase format";
}

因此，实现目标的可能方式是设置样式，而不是样式属性：

imageZoom.getElement().setAttribute("style", "-webkit-transform: translate3d("+x+"px, "+y+"px, 0px)");

此外，您可以先获取样式，将其设为toString，然后添加此属性并将样式指定回元素。

我们如何在GWT 2.5中将CSS3样式应用于图像

2 个答案: