關于dom元素style對象的誤區

首先要認識一點: dom元素的style對象和dom元素的css樣式表兩者是獨立的,沒有任何關系.
譬如我在css中給元素設置一個color屬性,訪問node.style.color, 會顯示空字符串.
我之前一直把這兩者混為一談了.
看例子:

 <div style="color: aqua;line-height: 24px" class="demo">
    <p>hello world</p>
  </div>
  .demo {
    background-color: bisque;
    font-size: 16px;
  }
<script>
  var node = document.querySelector('.demo')
  console.log(node.style.color) // aqua
  console.log(node.style.backgroundColor) // ''
  console.log(node.style)
  console.log(node.style[0])  // 'color'
  console.log(node.style.cssText)  // 'color: aqua; line-height: 24px;'
  console.log(node.style.fontSize) // ''
</script>

比較有意思的是node.style[0],賦值過的內聯樣式可以通過索引來訪問key.順序也是內聯樣式在前,通過js賦值的樣式在后.
兼容性暫時未知.

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、樣式篇 第1章 初識jQuery (1)環境搭建 進入官方網站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,445評論 0 44
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 復習: 項目文檔:api手冊 用markdown編寫 不同編程語言的區別 函數式編程:讓電腦像人一樣思考 指令式編...
    ZGKzm閱讀 265評論 0 0
  • 有時候身邊的人總會很善意地“教你做人”,雖然他們知道在你身上發生的事情終將還是會由你自己決定,但就是擔心你往后做錯...
    鱈零kelsey閱讀 282評論 0 0
  • 今日剛得知,一個同事要離職了。這個男生是我在目前為止最認同的男同事,責任心強,特別有禮貌,有素質,胖胖憨憨的,也沒...
    禪司大人閱讀 200評論 1 0