HTML負責結構層，網頁的結構層由HTML或者XHTML之類的標記語言負責構建

CSS負責表示層，描述頁面內容應該如何呈現。

JavaScript負責行為層，負責內容應該如何響應事件這一問題。

?

能利用css解決的問題不要用js去實現，能用css實現的內容不要在html中使用，每個都應該嚴格負責自己的領域。

文檔里的每個元素都是對象（一切皆對象）

?

文檔的每個元素節點都有一個屬性style，style包含著元素的樣式，查詢這個屬性將返回一個對象而不是一個簡單的字符串，樣式都放在這個style對象的屬性里

因為每個屬性都會包含多個樣式，所以要返回一個對象才比較好對屬性進行操作！

?

格式：element(元素).style.property(屬性樣式)

?

如果要得到一個標簽的樣式：

從文檔里把這個元素找出來

利用element.style.property獲取樣式（css樣式名之間的-要用駝峰命名法來表示，否則js無法解析。例如：font-family-->fontFamily）

style屬性的一個很大的局限性：style只能返回內嵌樣式，即只有把css?style?添加到標記里，才能用DOM?style屬性去查詢那些信息

　　　　　　　　　　　　　　　　　　　來自外部的.css文件已經不能再用DOM?style檢索出來了。

ps：顏色：在css用顏色的英文名來命名顏色，如red，在js中會顯示red，如果用#000000類似的用法，js會顯示為RGB的格式

?

?

?

為內嵌樣式設置屬性：

style屬性的各個樣式，不僅可讀，還可寫。可以通過style屬性去更新樣式；

格式： element(元素).style.property(要改變的屬性樣式) = " value "（引號必加）；

注意：只有在css不方便的場合，才可以使用DOM對文檔的樣式做一些的小的增強，但是css始終是主體；

js特別擅長處理重復性任務，用一個while或者for循環就可以輕松地遍歷一個很長的列表

?

?

在.CSS文件中改變樣式：（確保網頁的表示層和行為層分離的徹底）

與其使用DOM直接改變某個元素的樣式，不如通過JavaScript代碼去更新這個元素的class屬性

技巧：在css樣式表里寫多一個class屬性的樣式表，利用setAttribute方法來把標簽中class屬性的值改變，從而得到新的樣式。

className屬性：有一個更簡單的辦法更新class的是使用className屬性（是一個可讀，可寫的屬性），只要是元素節點都有這個屬性

獲取元素的class值，格式：?element（元素）.className

用className屬性和賦值操作符可以設置一個元素的class屬性值

格式：?element（元素）.className = "classname"

使用這個操作可以把新的class值把原先的class的值替換掉。

但有一個問題是，我們有時并不是想要替換掉這個class值，我們只是想在原來的class的值后面再追加一個class的值。

可以使用字符串拼接的方法：?element（元素）.className += " classname" ? 注意：在classname前面需要有一個空格

?

推薦步驟：

檢查className屬性的值是否為空

如果是，則直接把class的設置值直接賦給className

如果不是，則把一個空格和新的class設置值追加到className上面去

?

對函數進行抽象可以使函數的使用范圍更廣，通過賦予參數調用的方式；當發現可以對一個函數進行抽象時，應該立刻就去做！！！！！！

轉載于:https://www.cnblogs.com/Gary-Guoweihan/p/4774673.html

總結

以上是生活随笔為你收集整理的JavaScript css-dom的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。