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

Question

我有这个代码：

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

在 Chrome 浏览器上它可以正常工作，并相应地产生 41 像素和 5 像素的边距。
但在 FireFox 浏览器中，它会忽略这些命令，并且不会放置任何 margin 属性。

它还没有完成。
我对另一个成员（称为rowImage）有相同的命令。在那里，FireFox 浏览器将 margin-right 设置为 41px，但根本不设置 margin-left。

有人可以解释一下这种行为吗？
我有同样的经历

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

FireFox 完全忽略。

Answer 1

我认为使用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);

Answer 2

不幸的是，根据 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";
}

在开发模式或超级开发模式下运行会运行这些断言（或在启用断言的情况下进行编译，尽管这可能会很痛苦），当您尝试调试时它会失败，并显示建设性的错误消息。