Question

我有这段代码：

        colImage.getElement().getStyle().setProperty(isRtl ? "margin-right" : "margin-left", "41px");
        colImage.getElement().getStyle().setProperty(isRtl ? "margin-left" : "margin-right", "5px");

在Chrome浏览器上，它可以正常工作，并相应地提供41px和5px的保证金但是在FireFox浏览器中它忽略了这些命令，并且没有放置任何margin属性。

它还没有完成。
我有相同的命令在另一个成员上工作（称为rowImage）。在那里，FireFox浏览器的边距为41px，但根本没有保留边距。

有人可以解释一下这种行为吗？

我有同样的经历

setProperty("pointer-events", "auto");

FireFox完全忽略了。

Answer 1

不幸的是，根据JavaScript的一面，没有名为pointer-events的CSS样式属性，甚至也没有margin-left，background-color等等。相反，必须有一个驼峰式的案例这些属性使它们按预期生效。

请尝试这些：

colImage.getElement().getStyle().setProperty(isRtl ? "marginRight" : "marginLeft", "41px");
colImage.getElement().getStyle().setProperty(isRtl ? "marginLeft" : "marginRight", "5px");

...

setProperty("pointerEvents", "auto");

等

实际上，setProperty应该使用这些样式属性的破折号版本失败。来自https://gwt.googlesource.com/gwt/+/master/user/src/com/google/gwt/dom/client/Style.java#2111

/**
 * Sets the value of a named property in the specified units.
 */
public final void setProperty(String name, double value, Unit unit) {
  assertCamelCase(name);
  setPropertyImpl(name, value + unit.getType());
}

...

/**
 * Assert that the specified property does not contain a hyphen.
 * 
 * @param name the property name
 */
private void assertCamelCase(String name) {
  assert !name.contains("-") : "The style name '" + name
      + "' should be in camelCase format";
}

在开发模式或超级开发模式下运行会运行这些断言（或者在启用断言的情况下进行编译，虽然这可能很麻烦），并且当您尝试使用建设性的错误消息进行调试时它会失败。

Answer 2

我认为使用getElement().getStyle().setProperty()方法是个坏主意。尝试在CSS .is_rtl和.not_is_rtl样式中定义：

.is_rtl {    
  margin-left : 5px !important;
  margin-right : 41px !important; 
}

和

.not_is_rtl {
  margin-left : 41px !important;
  margin-right : 5px !important;  
}

输入你的代码：

private static final String IS_RTL_STYLE = "is_rtl";
private static final String NOT_IS_RTL_STYLE = "not_is_rtl";
....
colImage.addStyleName(isRtl ? IS_RTL_STYLE : NOT_IS_RTL_STYLE);

GWT - setProperty方法对FireFox浏览器不起作用

2 个答案: