CSS代码是否会初始化DOM对象的.style属性？

Question

背景：

我创建了一个简单的DOM事件示例：请在这里查看jsfiddle。

<div id="squirrel" onmouseover="toggleFloat(this)">
    <p>Click me!</p>
</div>

<script>
    function toggleFloat(ele){
        var current = ele.style.cssFloat;
        console.log("cssFloat: "+current);
        if(current==="left")
            ele.style.cssFloat="right";
        else
            ele.style.cssFloat="left";
    }
</script>

伴随着的 CSS：

#squirrel{
  float:left;
}

注意到了奇怪的行为：在DOM中，#squirrel的cssFloat属性的初始值为""。（打开开发者控制台查看。或者注意到#squirrel直到第二个事件触发才移动。）

我的问题是： CSS代码不应该初始化DOM对象的cssFloat属性吗？或者其他任何样式属性呢？

- Andrew

---

元素的style属性表示它的内联样式（使用style属性定义）。这些样式不会被在CSS文件中定义的CSS规则所修改。浏览器根据这些规则和内联样式计算出最终样式。可以使用MDN：Window.getComputedStyle()获取最终计算出的样式。 - t.niese

没错！在行内使用样式效果如预期。（请将您的评论作为答案发布，以便我选择？） - Andrew

Answer 1

style属性表示一个元素的内联样式（使用style属性定义）。

这些样式不受CSS文件中定义的CSS规则的修改。浏览器基于这些规则和内联样式计算最终的样式。

可使用MDN：Window.getComputedStyle()获取最终计算的样式。

通常情况下，应避免使用内联样式属性。通常应尝试使用class来操作特定元素的外观。只有在真正没有其他方法时，才应使用style属性动态更改内联样式，例如需要动态移动元素。也可以阅读内联标签与内联CSS属性的答案以获取更多信息。

- t.niese

Answer 2

CSS从不修改DOM。

在DOM中的'style'属性将与CSS样式表中定义的样式合并/覆盖。

- user2864740