三行代码看起来相同，只有一行有效。为什么？

Question

我这里有一些GWT代码。我正在尝试更改小部件的背景颜色：

this.getElement().setAttribute("backgroundColor", backgroundColor);
this.getElement().setPropertyString("backgroundColor", backgroundColor);
this.getElement().getStyle().setProperty("backgroundColor", backgroundColor);

通常在代码中，我可以通过函数的名称来判断代码的作用...但在这种情况下，所有三行代码看起来都相同并且“读取相同”！ （阅读javadoc也没有帮助。我去了javadoc，因为这通常有助于我理解代码的作用.javadoc没有帮助。）

我的问题是：请解释这三行代码之间的区别（例如，为什么需要调用getStyle（））？为什么最后一行有效？

Answer 1

this.getElement().getStyle().setProperty("backgroundColor", backgroundColor);

是访问实际style信息的唯一行，properties和attributes直接操纵元素，与Style没有任何关系与元素相关联。

另外，您应该使用样式表并更改样式，而不是以这种方式设置inline。

Answer 2

这是

之间的区别

<tag backgroundColor="#f0f0f0">

和

<tag style="background-color:#f0f0f0">

Answer 3

这是一种有根据的猜测......

第1行您正在访问元素的属性而不是样式属性。

第2行将访问元素上的属性而不是样式。

第3行实际上获取了样式属性，然后相应地更改它们。