CSS代碼是否初始化DOM對象的.style屬性？

我創建了一個簡單的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中，＃松鼠爲cssFloat屬性的初始值是「」。（打開開發者控制檯查看，或者注意#squirrel在第二個事件觸發之前不會移動）。

我的問題是：應該CSS代碼沒有初始化DOM對象的cssFloat屬性？ ...或者這件事的任何風格屬性？

來源

2016-08-30 Andrew

元素的'style'屬性表示其內聯樣式（用'style'屬性定義）。這些不會被你的css文件中定義的css規則所修改。瀏覽器根據這些規則和內聯樣式計算最終樣式。 [：Window.getComputedStyle（）''MDN（https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle） –

是的最終計算樣式可以使用檢索到的！做內聯樣式[按預期工作]（https://jsfiddle.net/vgwfL3L1/6/）。（將您的評論發佈爲答案，以便我可以選擇它？） – Andrew

對元件的style屬性表示其內樣式（與style屬性定義）。

那些沒有通過在你的CSS文件中定義的CSS規則進行修改。瀏覽器根據這些規則和內聯樣式計算最終樣式。

最後計算的風格，可以使用MDN: Window.getComputedStyle()

通常應該避免使用內聯樣式屬性進行檢索。通常情況下，您應該嘗試使用class來操縱某個元素的外觀。此外，只有在確實沒有方法時才使用style屬性來動態更改內聯樣式，例如，如果你需要動態地移動一個元素。您也可以閱讀Inline tags vs. inline css properties的答案獲取更多信息。

來源

2016-08-30 19:28:01

CSS 從未修改DOM。

的「風格」的DOM屬性合併，用/覆蓋樣式表中定義的CSS。

來源

2016-08-30 18:22:23 user2864740

CSS代碼是否初始化DOM對象的.style屬性？

回答

相關問題