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属性的初始值是＆＃34;＆＃34;。（打开开发人员控制台以查看此信息。或者注意#squirrel在第二个事件触发之前不会移动。）。

我的问题是： CSS代码是否应该初始化DOM对象的cssFloat属性？ ...或者任何风格属性？

Answer 1

CSS 从不修改DOM。

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

Answer 2

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

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

可以使用MDN: Window.getComputedStyle()

检索最终的计算样式

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

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

2 个答案: