1 .操作css樣式最簡單的方法，就是使用網(wǎng)頁元素節(jié)點的getAttribute方法题涨，setAttribute谎痢，removeAttribute方法，直接讀寫或者刪除網(wǎng)頁的style屬性味廊。

1 .div.setAttribute(
  'style',
  'background-color:red;'+'border:1px solid black;'
)
2 .div.style.backgroundColor="red"
3 .以上兩個寫法是完全一致的。
4 .div.style.cssText='background-color: red;'
  + 'border: 1px solid black;'
  + 'height: 100px;'
  + 'width: 100px;';

4 .style不僅可以使用字符串讀寫，而且本身還是一個對象毡们，部署了cssStyleDeclaration接口

cssStyleDeclaration接口

1 .元素節(jié)點的style屬性
2 .cssStyle實例的style屬性
3 .window.getComputedStyle()的返回值迅皇，只有這三個地方部署了這個接口，可以直接操作css的樣式

改寫規(guī)則

1 .如果中間有連字符的話衙熔，那么要按照駝峰式重寫
2 .如果是js的保留字，則規(guī)則名之前需要加上字符串css搅荞，比如cssFloat红氯。
3 .所有style的屬性值都是字符串，設(shè)置的時候必須加上單位
3 .el.style返回的只是行內(nèi)樣式咕痛，并不是該元素的全部樣式痢甘，通過樣式表設(shè)置的樣式，或者從父元素繼承的樣式茉贡，無法通過這個屬性得到塞栅。元素的全部樣式要通過window.getComputedStyle()得到。

實例屬性

1 .style.cssText:讀寫當(dāng)前規(guī)則的所有樣式聲明文本腔丧。刪除一個元素的所有行內(nèi)樣式放椰，最簡單的方法就是設(shè)置cssText為空字符串。
2 .style.length:返回一個整數(shù)值愉粤，表示當(dāng)前規(guī)則包含多少條樣式聲明
3 .style.parentRule:返回當(dāng)前規(guī)則所屬的那個樣式塊砾医，如果不存在樣式塊，該屬性返回null.

實例方法

1 .style.getPropertyPriority():傳入一個css樣式的屬性名作為參數(shù)衣厘，返回一個字符串如蚜，表示有沒有設(shè)置important優(yōu)先級。如果有則返回important影暴，否則返回一個空字符串错邦。
2 .style.getPropertyValue():傳入一個css樣式屬性名作為參數(shù)，返回一個字符串型宙，表示該屬性的值
3 .style.item():接受一個整數(shù)值作為參數(shù)撬呢，返回該位置的css屬性名
4 .style.removeProperty()接受一個屬性名作為參數(shù)，在css規(guī)則里面移除這個屬性早歇，返回這個屬性原來的值倾芝。
5 .style.setProperty(name,value,important):注意第三個值，不是必須箭跳，如果設(shè)置晨另，則該規(guī)則使用!importantant規(guī)則

css模塊檢測

1 .檢測當(dāng)前瀏覽器是否支持某個模塊,通常的方法是檢測style對象的某個屬性值是否為字符串。如果該屬性存在谱姓，會返回一個字符串借尿，如果不存在，則返回一個空字符串。

function isPropertySupported(property) {
  if (property in document.body.style) return true;
  var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
  var prefProperty = property.charAt(0).toUpperCase() + property.substr(1);

  for(var i = 0; i < prefixes.length; i++){
    if((prefixes[i] + prefProperty) in document.body.style) return true;
  }

  return false;
}

2 .css.escape():用于轉(zhuǎn)義css選擇器里面的特殊字符
3 .css.supports():用于表示當(dāng)前環(huán)境是否支持某一句css規(guī)則
4 路翻。

window.getComputedStyle()

1 .行內(nèi)樣式擁有最高的優(yōu)先級狈癞，改變行內(nèi)樣式，通常會立即反應(yīng)出來茂契，但是網(wǎng)頁元素最終樣式是綜合各種規(guī)則計算出來的蝶桶。因此，如果想得到元素的實際樣式掉冶，只讀取行內(nèi)樣式是不夠的真竖，需要得到瀏覽器最終計算出來的樣式規(guī)則。
2 .const app=document.querySelector("#app")
const appstyle=window.getComputedStyle(app)
3 .此處的appstyle是指定節(jié)點的最終樣式厌小，也就是各種css規(guī)則疊加后的結(jié)果,比其他方式得來的數(shù)據(jù)跟可靠
4 .第二個參數(shù)恢共，表示當(dāng)前的偽元素:before,:after,:first_line,:first-letter,
5 .返回的css值都是絕對值，長度是像素單位璧亚，返回值包括px后綴讨韭。
6 .css的簡寫形式無效。想要獲取margin屬性的值癣蟋，不能直接讀取透硝，只能marginLeft，font屬性也不能直接讀取梢薪，只能讀取font-size等單個屬性蹬铺。

css偽元素

1 .通過css向DOM添加的元素，主要通過:before和:after選擇器生成秉撇，content里面指定偽元素的內(nèi)容甜攀。
2 .style對象無法讀取偽元素的樣式，這個時候需要用到上面的方法

text=document.querySelector("#test")
result=window.getComputedStyle(test,':before').content
color=window.getComputedStyle(test,':after').color

styleSheet

1 .代表網(wǎng)頁的一張樣式表琐馆，包括link元素加載的樣式表和<style>元素內(nèi)嵌的樣式表,是一個link一張表么规阀？這個里面的樣式也是一張表
2 .用現(xiàn)代框架的話，基本是沒有使用這個的空間的瘦麸。
3 .styleSheet接口不僅包括網(wǎng)頁樣式表谁撼，還包括XML文檔的樣式表。所以他有一個子類CSSStyleSheet表示網(wǎng)頁的css樣式表滋饲。我們在網(wǎng)頁里面拿到的樣式表實例厉碟，實際上是cssStyle的實例。這個子接口繼承了StyleSheet的所有屬性和方法

實例屬性

1 .s.disabled:返回一個布爾值屠缭，表示該樣式是否處于禁用狀態(tài)中箍鼓，手動設(shè)置disabled屬性為false。則樣式表不會生效呵曹，這個屬性只能在js腳本中設(shè)置款咖，不能再HTML語句中設(shè)置何暮。
2 .s.href:返回樣式表的網(wǎng)址，對于內(nèi)嵌樣式表铐殃，該屬性返回null海洼。
3 .s.media屬性返回一個類似數(shù)組的對象，成員是表示適用媒介的字符串富腊，表示當(dāng)前樣式是用于屏幕坏逢，還是打印設(shè)備或者手持設(shè)備。屬性是只讀
4 .s.type:通常是text/css
5 .s.parentStyleSheet:css的@import命令允許在樣式表中加載其他的樣式表蟹肘，這個屬性可以探測到當(dāng)前表所依賴的父表是哪個词疼。
6 .s.ownerNode:表示styleSheet對象所在的dom節(jié)點，通常是link或者style
7 .s.cssRules:指向一個類似數(shù)組的對象cssRulesList實例帘腹，里面的每一個成員都是當(dāng)前樣式表的一條css規(guī)則，使用該規(guī)則的cssText屬性许饿，可以得到對應(yīng)的字符串阳欲。他的style屬性，指向一個對象陋率，用來讀取具體的css命令球化。為什么link引用的沒有這個東西。
8 .上面這個是不是實時更新的瓦糟。
9 .s.ownerRule:如果當(dāng)前樣式表不是通過@import引入的筒愚，ownerRule屬性返回null.
10 .

實例方法

1 .會用到這么底層的方法么？或者說我在瀏覽器里面實際改動這個樣式表菩浙，對用戶而言會有優(yōu)化體驗么巢掺？這個表會重載么？
2 .CssStyleSheet.insertRule()：在當(dāng)前樣式表插入一個樣式劲蜻。
3 .CssStyleSheet.deleteRule():在當(dāng)前樣式表移除一個樣式陆淀。
4 .https://wangdoc.com/javascript/dom/css.html具體內(nèi)容在這個網(wǎng)址
5 .還包括一些查看自適應(yīng)的一些屬性和方法

動態(tài)加載css樣式

1 .跳到vue按需加載組件。