GWT:将style属性设置为element

Question

为了扩展我的div中的元素,我正在使用这个css(这里是JSFiddle示例):

.scaled {
    transform: scale(0.5);
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Safari and Chrome */
    -o-transform: scale(0.5); /* Opera */
    -moz-transform: scale(0.5); /* Firefox */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
        M11=0.5, M12=0,
        M21=0, M22=0.5);
}

所有主流浏览器(包括IE8)都支持此功能.

现在,当我尝试在GWT中动态应用此css时:

public void setZoom(double val) {
    if (val != 1) {
        surface.getElement().getStyle().setProperty("transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-ms-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-webkit-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-o-transform", "scale(" + val + ")");
        surface.getElement().getStyle().setProperty("-moz-transform", "scale(" + val + ")");
        surface.getElement().getStyle()
                .setProperty("filter", "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=" + val + ", M12=0,M21=0, M22=" + val + ")");
    }

}

我收到以下错误:

Caused by: java.lang.AssertionError: The style name '-ms-transform' should be in camelCase format
    at com.google.gwt.dom.client.Style$.assertCamelCase$(Style.java:1603)
    at com.google.gwt.dom.client.Style$.setProperty$(Style.java:1512)

如何在GWT中动态设置这些依赖于浏览器的样式？(尤其是IE的过滤器..)

Answer 1

这是GWT的问题跟踪器条目,讨论限制和变通方法.

http://code.google.com/p/google-web-toolkit/issues/detail?id=5152&q=assertCamelCase&colspec=ID%20Type%20Status%20Owner%20Milestone%20Summary%20Stars

这是另一篇在Javascript中讨论它的文章; http://www.javascriptkit.com/javatutors/setcss3properties.shtml

基本上,将破折号( - )之后的字母转换为大写,因此-moz-transform是'MozTransform'

所以这应该工作;

    surface.getElement().getStyle().setProperty("MozTransform", "scale(" + val + ")");