使用setTimeout()或者setInterval()使用這兩個函數定時調用一段代碼。這是其原理。

目的，重複修改內聯樣式，達到動畫的效果

通過在相同的時間內構造出一幀幀的內容，然後讓其在函數的作用下不斷的改變css的值，達到動畫的效果

js寫css動畫

// 將e轉化為相對定位的元素，使得其可以左右移動

// 第一個參數為元素對象或者元素的id

// 如果第二個參數是函數，以e為參數，它將在動畫結束時調用

// 第三個參數指定e移動的距離，默認為5像素

// 第四個參數指定移動多久，默認500毫秒

function shake(e, oncomplete, distance, time) {

// 句柄函數

if (typeof e === "string") e = document.getElemnentById(e);// 如果傳入的是對象的id則獲取對象的id，如果傳入的為元素（元素為對象）則直接跳過這一句

if (!time) time = 500;// 如果time是空值，則直接使用默認值

if (!distance) distance = 5;// 如果未指定移動的距離，則默認為5像素

var originalStyle = e.style.cssText;// 獲取元素e的css樣式

e.style.position = "relative";// 設置為相對定位

var start = (new Date()).getTime();// 設置動畫開始的時間,獲取一個格林威治時間

animate();// 動畫開始

// 函數檢查消耗時間，並更新e的位置

// 如果動畫完成，它將e還原為原始狀態

// 否則，將會更新e的位置，安排其自身重新運行

function animate() {

var now = (new Date()).getTime();// 獲取現在的時間

var elapsed = now-start;// 從開始以來消耗了多長時間

var fraction = elapsed / time;// 為總時間的幾分之幾

if (fraction < 1) {// 如果動畫未完成

// 作為動畫完成比例的函數，計算e的x位置

// 使用正弦函數將完成比例乘以4pi

// 所以，它將來回往返兩次

var x = distance * Math.sin(fraction * 4 * Math.PI); // 使用正弦函數實現每秒四幀

e.style.left = x + "px";

// 在25毫秒後或在總時間的最後嘗試再次運行函數

// 目的是為了產生每秒40幀動畫

setTimeout(animate, Math.min(25, time-elapsed));// 使用天花板函數再次調用，再次移動

}

else {// 否則動畫完成

e.style.cssText = originalStyle; // 恢復原始樣式

if (oncomplete) oncomplete(e);// 產生一個回調函數

}

}

}

// 以毫秒級的時間將e從完全不透明淡出到完全透明

// 在調用函數時假設e是完全不透明的

// oncomplete 是一個可選函數，以e為參數，它將在動畫結束的時調用

// 如果不指定time，默認為500毫秒

function fadeOut(e, oncomplete, time) {

if (typeof e === "string") e = document.getElementById(e);

if (!time) time = 500;

// 使用Math.sqrt作為一個緩動函數創建動畫

// 非線性函數，一開始淡出的較快，然後逐步的緩慢

var ease = Math.sqrt;

var start = (new Date()).getTime();// 動畫開始的時間

animate();// 動畫開始

function animate() {

var elapsed = (new Date()).getTime()-start;// 消耗的時間

var fraction = elapsed/time;// 總時間的幾分之幾

if (fraction < 1) {// 如果動畫未完成

var opacity = 1 - ease(fraction);// 計算不透明度 即 完成一次變換，開方

e.style.opacity = String(opacity);// 設置透明度

setTimeout(animate, // 進行下一幀

Math.min(25, time-elapsed));// 在25毫秒之後或者在總時間的最後再次調用

}else {

e.style.opacity = "0";// 使得e完全透明

if (oncomplete) oncomplete(e);// 在結束的時候回調

}

}

}

查詢計算出的樣式

getComputedStyle(e)

275個樣式。。。O__O "…

腳本化css類

除了能腳本化內聯樣式，同樣的也能腳本化css的類

移除，添加類

e.className = "attention"; // 添加類

e.className = ""; // 移除類

顯示類列表

classList

只讀屬性，返回元素類屬性的實時集合。

e.classList()

腳本化樣式表

開啟和關閉樣式表

style和link元素的CSSStyleSheet對象定義了一個在js中可以設置和查詢的disabled屬性。

關於disabled屬性，該屬性在HTML中不屬於規範的一部分，在HTML中不存在，但是，在DOM中存在該屬性。在標籤中無法設置該屬性，但是可以在腳本中設置該屬性

如果值為true，樣式表關閉，否則樣式表打開

e.disabled = true;

這樣樣式表即可關閉。

類似的通過以下方式也可

document.styleSheets[0].disabled;

查詢，插入與刪除樣式表規則

CSSStyleSheet對象同樣也定義了用來查詢，插入和刪除樣式表規則的api

查詢所有樣式表內容

var firstRule = document.styleSheets[0].cssRules[0];

document.styleSheets[0] 一個只讀屬性，返回一個該文檔的鏈接或嵌入的樣式表

該樣式只讀，不可進行插入和刪除

其中selectorText為css選擇器

cssText 為css的文本樣式

添加和刪除規則

insertRule()和deleteRule()這兩種方法，達到添加和刪除規則

還有一個addRule()方法

insertRule()方法

insertRule()和deleteRule()這兩種方法，達到添加和刪除規則

ss.insertRule(".name {color:blue}", 0);

在ss樣式表中，在第0條cssRules中添加一條css規則。使得類為name的字體變藍

如果添加的索引已經存在則不會覆蓋，所有的索引加1，然後進行插入

deleteRule()方法

刪除樣式規則

刪除上一條插入的樣式

ss.deleteRule(0);

刪除第0條規則，樣式繼續保持從0開始

創建新的樣式表

這個不難，直接插入一個新的style元素通過innerHTML的方式將其插入新的css內容，或者直接插入link標籤，設置添加一個html的屬性使用的是 Element.setAttritube()方法，將rel的值設置為stylesheet 然後在用同樣的方法添加src屬性

純粹的dom 和 bom的操作，不涉及任何樣式表的內容