背景:
我创建了一个简单的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属性吗?或者其他任何样式属性呢?
style
属性表示它的内联样式(使用style
属性定义)。这些样式不会被在CSS文件中定义的CSS规则所修改。浏览器根据这些规则和内联样式计算出最终样式。可以使用MDN:Window.getComputedStyle()
获取最终计算出的样式。 - t.niese