CSSコードはDOMオブジェクトの.styleプロパティを初期化しますか？

Question

背景：jsfiddle hereを参照してください。

私はシンプルなDOMイベントの例を作成しました。

<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では、cssFloatプロパティの＃リスの初期値は "" でした。 （これを見るには開発者コンソールを開くか、2番目のイベントが発生するまで#squirrelが動かないことに注意してください）。

私の質問はです。CSSコードはDOMオブジェクトのcssFloatプロパティを初期化していませんか？ ...またはそのようなスタイルプロパティのいずれか？

Answer 1

要素のプロパティは、インラインスタイル（style属性で定義）を表します。

これらは、CSSファイルで定義されているCSS規則では変更されません。ブラウザは、これらのルールとインラインスタイルに基づいて最終的なスタイルを計算します。

最終的に計算されたスタイルは、あなたが一般的にインラインスタイル属性を使用することを避ける必要がありMDN: Window.getComputedStyle()

を使用して取得することができます。通常、特定の要素の外観を操作するにはclassを使用するようにしてください。また、インラインスタイルを動的に変更するためのstyleプロパティの使用は、実際にその周囲に方法がない場合にのみ使用する必要があります。要素を動的に移動する必要がある場合詳細については、Inline tags vs. inline css propertiesへの回答を読むこともできます。

Answer 2

CSS 決してはDOMを変更します。

DOMの 'style'属性は、スタイルシートで定義されたCSSとマージされ/オーバーライドされます。