Question

为了扩展div中的元素，我正在使用这个css（JSFiddle Example here）：

.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 + ")");

Answer 2

您可以在CSS ResourceBundle或条件CSS中使用值函数：

https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Value_function

但是我不能从你的代码中理解为什么你需要使用transform：scale。您可以直接设置此元素的大小，例如

surface.setSize("100px", "200px")

如果您设置相对于某物的大小，您可以先测量某些内容（窗口或元素），然后计算所需的大小。此解决方案适用于所有浏览器，您不必依赖CSS3。

编辑：

你可以有一个div（＆＃34;表面＆＃34;在你的例子中），它不会改变它的大小。这个div将包含另一个div（例如，＆＃34; wrapper＆＃34;），其中包含所有内部内容。所有内容都可以相对于包装器div设置为百分比或者em。当您需要扩展内容时，只需更改包装器div的大小 - 其所有内容都将相应缩放。

Answer 3

为什么要尝试使用java代码设置属性。尽管GWT通过编码支持它，但它有很多限制。尝试给出一个CSS类名，然后在CSS中做你想做的事。

要通过GWT添加类名，您可以使用以下内容。

getElement().setClassName( "className" );
getElement().addClassName( "className" );

这里提供CSS类名（可以是任何名称）。在CSS文件中使用相同的className并执行所需的所有操作。

GWT：将style属性设置为element

3 个答案: