为什么“cssFloat”和“float”样式的行为不一样？

Question

我有一些代码使用

写入TD单元格的innerHTML

<img src='0.gif' style='cssFloat:left'>

我正在尝试使用为我生成图像标记的库重写此代码，实际上这样做是这样的：

img = document.createElement('img')
img.src = '0.gif'
img.style['cssFloat'] = 'left'

然而，当我这样做时，我看到了不同的行为：图像没有正确排列，当我在Chrome的调试工具中检查HTML源时，它说样式是“float：left”而不是“cssFloat：剩下”。如果我在调试器工具中手动编辑它为“cssFloat：left”，那么它会正确地浮动图像并且所有内容都正确排列。

为什么设置cssFloat以编程方式将样式更改为“float”？为什么会有所作为？

Answer 1

CSS属性是 float - 因此，样式属性中的未知/无效“cssFloat”属性将被忽略。

然而，CSS float属性在DOM中被映射为cssFloat以避免保留字（特别是float）。上面的MDN链接包含以下注释：

  

如果您从JavaScript中将此属性称为element.style对象的成员，则必须将其拼写为cssFloat 。 ..这是规则的一个例外，即DOM成员的名称是以破折号分隔的CSS名称的驼峰式名称（并且是由于“float”是JavaScript中的保留字这一事实。）< / p>

这类似于类（CSS）vs className（DOM）和其他“特殊”规则。

Answer 2

那很奇怪，因为......

好吧，首先我应该解释一下float是JS中的保留字。这意味着你不能只写something.float。所以他们决定改为something.cssFloat。

style="cssFloat:left"不正确，不应该有效（Inspector引用类似“未知属性”的内容）

那么为什么它对你的影响超出了我...但希望这些信息有所帮助！

Answer 3

答案：只需删除该行：

img.style['cssFloat'] = 'left'

它会起作用。

说明：

CSS中的javascript = cssFloat

float。

cssFloat css属性不存在。例如在chrome调试器中：

1）当您在css中写img.style['cssFloat'] = 'left'时，<img src="0.gif" style="float: left;" />将以<img src="0.gif" style="cssFloat: left;" />的方式设置＆＃39;浮动＆＃39;。

2）当你写<img src="0.gif" />时，cssFloat＆＃39;财产不存在。因此，您可以将此代码缩短为{{1}}