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

Question

背景:

我创建了一个简单的 DOM 事件示例:参见 jsfiddle here .

<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 属性吗？ ...或与此相关的任何样式属性？

Answer 1

元素的 style 属性表示其内联样式(使用 style 属性定义)。

这些不会被您的 css 文件中定义的 css 规则修改。浏览器根据这些规则和内联样式计算最终样式。

可以使用 MDN: Window.getComputedStyle() 检索最终计算出的样式

您通常应该避免使用内联样式属性。通常你应该尝试使用 class 来操纵某个元素的外观。此外，使用 style 属性动态更改内联样式只应在确实没有办法解决的情况下使用，例如如果您需要动态移动元素。您还可以阅读 Inline tags vs. inline css properties 的答案了解更多信息。