html - 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 浏览器上它工作正常并相应地产生 41px 和 5px 边距。
但是在 FireFox 浏览器中它会忽略这些命令并且不会放置任何 margin 属性。

还没有结束。
我对另一个成员使用了相同的命令(称为 rowImage)。在那里，FireFox 浏览器使 margin-right 为 41px，但根本没有使 margin-left。

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

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";
}

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