5.6 CSS操作 · JavaScript 標準參考教程

CSS與JavaScript是兩個有著明確分工的領域，前者負責頁面的視覺效果，后者負責與用戶的行為互動。但是，它們畢竟同屬網頁開發的前端，因此不可避免有著交叉和互相配合。本節介紹如果通過JavaScript操作CSS。 [TOC] ## HTML元素的style屬性操作Element節點的CSS樣式，最簡單的方法之一就是使用節點對象的getAttribute方法、setAttribute方法和removeAttribute方法，讀寫或刪除HTML元素的style屬性。 ~~~ div.setAttribute('style', 'background-color:red;' + 'border:1px solid black;'); ~~~ ## Element節點的style屬性 ### 基本用法 Element節點本身還提供style屬性，用來操作CSS樣式。 style屬性指向一個對象，用來讀寫頁面元素的行內CSS樣式。 ~~~ var divStyle = document.querySelector('div').style; divStyle.backgroundColor = 'red'; divStyle.border = '1px solid black'; divStyle.width = '100px'; divStyle.height = '100px'; divStyle.backgroundColor // red divStyle.border // 1px solid black divStyle.height // 100px divStyle.width // 100px ~~~ 從上面代碼可以看到，style對象的屬性與CSS規則名一一對應，但是需要改寫。具體規則是將橫杠從CSS屬性名中去除，然后將橫杠后的第一個字母大寫，比如background-color寫成backgroundColor。如果CSS屬性名是JavaScript保留字，則規則名之前需要加上字符串“css”，比如float寫成cssFloat。注意，style對象的屬性值都是字符串，而且包括單位。所以，divStyle.width不能設置為100，而要設置為'100px'。 ### cssText屬性 style對象的cssText可以用來讀寫或刪除整個style屬性。 ~~~ divStyle.cssText = 'background-color:red;' + 'border:1px solid black;' + 'height:100px;' + 'width:100px;'; ~~~ 注意，cssText對應的是HTML元素的style屬性，所以不用改寫CSS屬性名。 ### CSS模塊的偵測 CSS的規格發展太快，新的模塊層出不窮。不同瀏覽器的不同版本，對CSS模塊的支持情況都不一樣。有時候，需要知道當前瀏覽器是否支持某個模塊，這就叫做“CSS模塊的偵測”。一個比較普遍適用的方法是，判斷某個DOM元素的style對象的某個屬性值是否為字符串。 ~~~ typeof element.style.animationName === 'string'; typeof element.style.transform === 'string'; ~~~ 如果該CSS屬性確實存在，會返回一個字符串。即使該屬性實際上并未設置，也會返回一個空字符串。如果該屬性不存在，則會返回undefined。 ~~~ document.body.style['maxWidth'] // "" document.body.style['maximumWidth'] // undefined ~~~ 需要注意的是，不管CSS屬性名帶不帶連詞線，style對象都會顯示該屬性存在。 ~~~ document.body.style['backgroundColor'] // "" document.body.style['background-color'] // "" ~~~ 所有瀏覽器都能用這個方法，但是使用的時候，需要把不同瀏覽器的CSS規則前綴也考慮進去。 ~~~ var content = document.getElementById("content"); typeof content.style['webkitAnimation'] === 'string' ~~~ 這種偵測方法可以寫成一個函數。 ~~~ 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; } isPropertySupported('background-clip') // true ~~~ 此外，部分瀏覽器（Firefox 22+, Chrome 28+, Opera 12.1+）目前部署了supports API，可以返回一個布爾值，表示是否支持某條CSS規則。但是，這個API還沒有成為標準。 ~~~ CSS.supports('transform-origin', '5px'); CSS.supports('(display: table-cell) and (display: list-item)'); ~~~ ### setPropertyValue()，getPropertyValue()，removeProperty() style對象的以下三個方法，用來讀寫行內CSS規則。 * setPropertyValue(propertyName,value)：設置某個CSS屬性。 * getPropertyValue(propertyName)：讀取某個CSS屬性。 * removeProperty(propertyName)：刪除某個CSS屬性。這三個方法的第一個參數，都是CSS屬性名，且不用改寫連詞線。 ~~~ divStyle.setProperty('background-color','red'); divStyle.getPropertyValue('background-color'); divStyle.removeProperty('background-color'); ~~~ ## CSS偽元素 CSS偽元素是通過CSS向DOM添加的元素，主要方法是通過“:before”和“:after”選擇器生成偽元素，然后用content屬性指定偽元素的內容。以如下HTML代碼為例。 ~~~ <div id="test">Test content</div> ~~~ CSS添加偽元素的寫法如下。 ~~~ #test:before { content: 'Before '; color: #FF0; } ~~~ DOM節點的style對象無法讀寫偽元素的樣式，這時就要用到window對象的getComputedStyle方法（詳見下面介紹）。JavaScript獲取偽元素，可以使用下面的方法。 ~~~ var test = document.querySelector('#test'); var result = window.getComputedStyle(test, ':before').content; var color = window.getComputedStyle(test, ':before').color; ~~~ 此外，也可以使用window.getComputedStyle對象的getPropertyValue方法，獲取偽元素的屬性。 ~~~ var result = window.getComputedStyle(test, ':before') .getPropertyValue('content'); var color = window.getComputedStyle(test, ':before') .getPropertyValue('color'); ~~~ ## StyleSheet對象 ### 獲取樣式表 StyleSheet對象代表網頁的一張樣式表，它包括link節點加載的樣式表和style節點內嵌的樣式表。 document對象的styleSheets屬性，可以返回當前頁面的所有StyleSheet對象（即所有樣式表）。它是一個類似數組的對象。 ~~~ var sheets = document.styleSheets; var sheet = document.styleSheets[0]; ~~~ 此外，link節點和style節點的sheet屬性，也可以獲取StyleSheet對象。 ~~~ // HTML代碼為 // <link id="linkElement" href="http://path/to/stylesheet"> // <style id="styleElement"> // body{font-size: 1.2 rem;} // </style> // 等同于document.styleSheets[0] document.querySelector('#linkElement').sheet // 等同于document.styleSheets[1] document.querySelector('#styleElement').sheet ~~~ ### 屬性 StyleSheet對象有以下屬性。（1）media屬性 media屬性表示這個樣式表是用于屏幕（screen），還是用于打印（print），或兩者都適用（all）。該屬性只讀，默認值是screen。 ~~~ document.styleSheets[0].media.mediaText // "all" ~~~ （2）disabled屬性 disabled屬性用于打開或關閉一張樣式表。 ~~~ document.querySelector('#linkElement').disabled = true; ~~~ disabled屬性只能在JavaScript中設置，不能在html語句中設置。（3）href屬性 href屬性是只讀屬性，返回StyleSheet對象連接的樣式表地址。對于內嵌的style節點，該屬性等于null。 ~~~ document.styleSheets[0].href ~~~ （4）title屬性 title屬性返回StyleSheet對象的title值。（5）type屬性 type屬性返回StyleSheet對象的type值，通常是text/css。 ~~~ document.styleSheets[0].type // "text/css" ~~~ （6）parentStyleSheet屬性 CSS的@import命令允許在樣式表中加載其他樣式表。parentStyleSheet屬性返回包括了當前樣式表的那張樣式表。如果當前樣式表是頂層樣式表，則該屬性返回null。 ~~~ if (stylesheet.parentStyleSheet) { sheet = stylesheet.parentStyleSheet; } else { sheet = stylesheet; } ~~~ （7）ownerNode屬性 ownerNode屬性返回StyleSheet對象所在的DOM節點，通常是或。對于那些由其他樣式表引用的樣式表，該屬性為null。 ~~~ // HTML代碼為 // <link rel="StyleSheet" href="example.css" type="text/css" /> document.styleSheets[0].ownerNode // [object HTMLLinkElement] ~~~ （8）cssRules屬性 cssRules屬性指向一個類似數組的對象，里面每一個成員就是當前樣式表的一條CSS規則。使用該規則的cssText屬性，可以得到CSS規則對應的字符串。 ~~~ var sheet = document.querySelector('#styleElement').sheet; sheet.cssRules[0].cssText // "body { background-color: red; margin: 20px; }" sheet.cssRules[1].cssText // "p { line-height: 1.4em; color: blue; }" ~~~ 每條CSS規則還有一個style屬性，指向一個對象，用來讀寫具體的CSS命令。 ~~~ styleSheet.cssRules[0].style.color = 'red'; styleSheet.cssRules[1].style.color = 'purple'; ~~~ ### insertRule()，deleteRule() insertRule方法用于在當前樣式表的cssRules對象插入CSS規則，deleteRule方法用于刪除cssRules對象的CSS規則。 ~~~ var sheet = document.querySelector('#styleElement').sheet; sheet.insertRule('#blanc { color:white }', 0); sheet.insertRule('p { color:red }',1); sheet.deleteRule(1); ~~~ insertRule方法的第一個參數是表示CSS規則的字符串，第二個參數是該規則在cssRules對象的插入位置。deleteRule方法的參數是該條規則在cssRules對象中的位置。 IE 9開始支持insertRule方法，在此之前都使用addRule方法。addRule的寫法與insertRule略有不同，接受三個參數。 ~~~ sheet.addRule('p','color:red',1); ~~~ 上面代碼將一條CSS語句插入p選擇器所有語句的第二位。最后一個參數默認為-1，即新增語句插在所有語句的最后。 ### 添加樣式表添加樣式表有兩種方式。一種是添加一張內置樣式表，即在文檔中添加一個節點。 ~~~ var style = document.createElement('style'); style.setAttribute('media', 'screen'); // 或者 style.setAttribute("media", "@media only screen and (max-width : 1024px)"); style.innerHTML = 'body{color:red}'; // 或者 sheet.insertRule("header { float: left; opacity: 0.8; }", 1); document.head.appendChild(style); ~~~ 另一種是添加外部樣式表，即在文檔中添加一個link節點，然后將href屬性指向外部樣式表的URL。 ~~~ var linkElm = document.createElement('link'); linkElm.setAttribute('rel', 'sty規則lesheet'); linkElm.setAttribute('type', 'text/css'); linkElm.setAttribute('href', 'reset-min.css'); document.head.appendChild(linkElm); ~~~ ## CSS規則一條CSS規則包括兩個部分：CSS選擇器和樣式聲明。下面就是一條典型的CSS規則。 ~~~ .myClass { background-color: yellow; } ~~~ ### CSSRule接口 CSS規則部署了CSSRule接口，它包括了以下屬性。（1）cssText cssText屬性返回當前規則的文本。 ~~~ // CSS代碼為 // body { background-color: darkblue; } var stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].cssText // body { background-color: darkblue; } ~~~ （2）parentStyleSheet parentStyleSheet屬性返回定義當前規則的樣式表對象。（3）parentRule parentRule返回包含當前規則的那條CSS規則。最典型的情況，就是當前規則包含在一個@media代碼塊之中。如果當前規則是頂層規則，則該屬性返回null。（4）type type屬性返回有一個整數值，表示當前規則的類型。最常見的類型有以下幾種。 * 1：樣式規則，部署了CSSStyleRule接口 * 3：輸入規則，部署了CSSImportRule接口 * 4：Media規則，部署了CSSMediaRule接口 * 5：字體規則，部署了CSSFontFaceRule接口 ### CSSStyleRule接口如果一條CSS規則是普通的樣式規則，那么除了CSSRule接口，它還部署了CSSStyleRule接口。 CSSRule接口有以下兩個屬性。（1）selectorText屬性 selectorText屬性返回當前規則的選擇器。 ~~~ var stylesheet = document.styleSheets[0]; stylesheet.cssRules[0].selectorText // ".myClass" ~~~ （2）style屬性 style屬性返回一個對象，代表當前規則的樣式聲明，也就是選擇器后面的大括號里面的部分。該對象部署了CSSStyleDeclaration接口，使用它的cssText屬性，可以返回所有樣式聲明，格式為字符串。 ~~~ document.styleSheets[0].cssRules[0].style.cssText // "background-color: gray;font-size: 120%;" ~~~ ### CSSMediaRule接口如果一條CSS規則是@media代碼塊，那么它除了CSSRule接口，還部署了CSSMediaRule接口。該接口主要提供一個media屬性，可以返回@media代碼塊的media規則。 ### CSSStyleDeclaration對象每一條CSS規則的樣式聲明部分（大括號內部的部分），都是一個CSSStyleDeclaration對象，主要包括三種情況。 * HTML元素的行內樣式（） * CSSStyleRule接口的style屬性 * window.getComputedStyle()的返回結果每一條CSS屬性，都是CSSStyleDeclaration對象的屬性。不過，連詞號需要編程駱駝拼寫法。 ~~~ var styleObj = document.styleSheets[0].cssRules[1].style; styleObj.color // "red"; styleObj.fontSize // "100%" ~~~ 除了CSS屬性以外，CSSStyleDeclaration對象還包括以下屬性。 * cssText：當前規則的所有樣式聲明文本。該屬性可讀寫，即可用來設置當前規則。 * length：當前規則包含多少條聲明。 * parentRule：包含當前規則的那條規則，同CSSRule接口的parentRule屬性。 CSSStyleDeclaration對象包括以下方法。（1）getPropertyPriority() getPropertyPriority方法返回指定聲明的優先級，如果有的話，就是“important”，否則就是空字符串。 ~~~ var styleObj = document.styleSheets[0].cssRules[1].style; styleObj.getPropertyPriority('color') // "" ~~~ （2）getPropertyValue() getPropertyValue方法返回指定聲明的值。 ~~~ // CSS代碼為 // color:red; var styleObj = document.styleSheets[0].cssRules[1].style; styleObj.getPropertyValue('color') // "red" ~~~ （3）item() item方法返回指定位置的屬性名。 ~~~ var styleObj = document.styleSheets[0].cssRules[1].style; styleObj.item(0) // "color" // 或者 styleObj[0] // "color" ~~~ （4）removeProperty() removeProperty方法用于刪除一條CSS屬性，返回被刪除的值。 ~~~ // CSS代碼為 // color:red; var styleObj = document.styleSheets[0].cssRules[1].style; styleObj.removeProperty('color') // "red" ~~~ （5）setProperty() setProperty方法用于設置指定的CSS屬性，沒有返回值。 ~~~ var styleObj = document.styleSheets[0].cssRules[1].style; styleObj.setProperty('color', 'green', 'important'); ~~~ 下面是遍歷一條CSS規則所有屬性的例子。 ~~~ var styleObj = document.styleSheets[0].cssRules[0].style; for (var i = styleObj.length - 1; i >= 0; i--) { var nameString = styleObj[i]; styleObj.removeProperty(nameString); } ~~~ 上面刪除了一條CSS規則的所有屬性，更簡便的方法是設置cssText屬性為空字符串。 ~~~ styleObj.cssText = ''; ~~~ ## window.getComputedStyle() getComputedStyle方法接受一個DOM節點對象作為參數，返回一個包含該節點最終樣式信息的對象。所謂“最終樣式信息”，指的是各種CSS規則疊加后的結果。 ~~~ var div = document.querySelector('div'); window.getComputedStyle(div).backgroundColor ~~~ getComputedStyle方法還可以接受第二個參數，表示指定節點的偽元素。 ~~~ var result = window.getComputedStyle(div, ':before'); ~~~ getComputedStyle方法返回的是一個CSSStyleDeclaration對象。但是此時，這個對象是只讀的，也就是只能用來讀取樣式信息，不能用來設置。如果想設置樣式，應該使用Element節點的style屬性。 ~~~ var elem = document.getElementById("elem-container"); var hValue = window.getComputedStyle(elem,null).getPropertyValue("height"); ~~~ ## window.matchMedia() ### 基本用法 window.matchMedia方法用來檢查CSS的[mediaQuery](https://developer.mozilla.org/en-US/docs/DOM/Using_media_queries_from_code)語句。各種瀏覽器的最新版本（包括IE 10+）都支持該方法，對于不支持該方法的老式瀏覽器，可以使用第三方函數庫[matchMedia.js](https://github.com/paulirish/matchMedia.js/)。 CSS的mediaQuery語句有點像if語句，只要顯示媒介（包括瀏覽器和屏幕等）滿足mediaQuery語句設定的條件，就會執行區塊內部的語句。下面是mediaQuery語句的一個例子。 ~~~ @media all and (max-width: 700px) { body { background: #FF0; } } ~~~ 上面的CSS代碼表示，該區塊對所有媒介（media）有效，且視口的最大寬度不得超過700像素。如果條件滿足，則body元素的背景設為#FF0。需要注意的是，mediaQuery接受兩種寬度/高度的度量，一種是上例的“視口”的寬度/高度，還有一種是“設備”的寬度/高度，下面就是一個例子。 ~~~ @media all and (max-device-width: 700px) { body { background: #FF0; } } ~~~ 視口的寬度/高度（width/height）使用documentElement.clientWidth/clientHeight來衡量，單位是CSS像素；設備的寬度/高度（device-width/device-height）使用screen.width/height來衡量，單位是設備硬件的像素。 window.matchMedia方法接受一個mediaQuery語句的字符串作為參數，返回一個[MediaQueryList](https://developer.mozilla.org/en-US/docs/DOM/MediaQueryList)對象。該對象有以下兩個屬性。 * media：返回所查詢的mediaQuery語句字符串。 * matches：返回一個布爾值，表示當前環境是否匹配查詢語句。 ~~~ var result = window.matchMedia("(min-width: 600px)"); result.media // (min-width: 600px) result.matches // true ~~~ 下面是另外一個例子，根據mediaQuery是否匹配當前環境，執行不同的JavaScript代碼。 ~~~ var result = window.matchMedia('@media all and (max-width: 700px)'); if (result.matches) { console.log('頁面寬度小于等于700px'); } else { console.log('頁面寬度大于700px'); } ~~~ 下面的例子根據mediaQuery是否匹配當前環境，加載相應的CSS樣式表。 ~~~ var result = window.matchMedia("(max-width: 700px)"); if (result.matches){ var linkElm = document.createElement('link'); linkElm.setAttribute('rel', 'stylesheet'); linkElm.setAttribute('type', 'text/css'); linkElm.setAttribute('href', 'small.css'); document.head.appendChild(linkElm); } ~~~ ### 監聽事件 window.matchMedia方法返回的MediaQueryList對象有兩個方法，用來監聽事件：addListener方法和removeListener方法。如果mediaQuery查詢結果發生變化，就調用指定的回調函數。 ~~~ var mql = window.matchMedia("(max-width: 700px)"); // 指定回調函數 mql.addListener(mqCallback); // 撤銷回調函數 mql.removeListener(mqCallback); function mqCallback(mql) { if (mql.matches) { // 寬度小于等于700像素 } else { // 寬度大于700像素 } } ~~~ 上面代碼中，回調函數的參數是MediaQueryList對象。回調函數的調用可能存在兩種情況。一種是顯示寬度從700像素以上變為以下，另一種是從700像素以下變為以上，所以在回調函數內部要判斷一下當前的屏幕寬度。 ## CSS事件 ### transitionEnd事件 CSS的過渡效果（transition）結束后，觸發transitionEnd事件。 ~~~ el.addEventListener("transitionend", onTransitionEnd, false); function onTransitionEnd() { console.log('Transition end'); } ~~~ transitionEnd的事件對象具有以下屬性。 * propertyName：發生transition效果的CSS屬性名。 * elapsedTime：transition效果持續的秒數，不含transition-delay的時間。 * pseudoElement：如果transition效果發生在偽元素，會返回該偽元素的名稱，以“::”開頭。如果不發生在偽元素上，則返回一個空字符串。實際使用transitionend事件時，需要添加瀏覽器前綴。 ~~~ el.addEventListener('webkitTransitionEnd ' + 'transitionend ' + 'msTransitionEnd ' + 'oTransitionEnd ', function(){ el.style.transition = 'none'; }); ~~~ ### animationstart事件，animationend事件，animationiteration事件 CSS動畫有以下三個事件。 * animationstart事件：動畫開始時觸發。 * animationend事件：動畫結束時觸發。 * animationiteration事件：開始新一輪動畫循環時觸發。如果animation-iteration-count屬性等于1，該事件不觸發，即只播放一輪的CSS動畫，不會觸發animationiteration事件。 ~~~ div.addEventListener('animationiteration', function() { console.log('完成一次動畫'); }); ~~~ 這三個事件的事件對象，都有animationName屬性（返回產生過渡效果的CSS屬性名）和elapsedTime屬性（動畫已經運行的秒數）。對于animationstart事件，elapsedTime屬性等于0，除非animation-delay屬性等于負值。 ~~~ var el = document.getElementById("animation"); el.addEventListener("animationstart", listener, false); el.addEventListener("animationend", listener, false); el.addEventListener("animationiteration", listener, false); function listener(e) { var li = document.createElement("li"); switch(e.type) { case "animationstart": li.innerHTML = "Started: elapsed time is " + e.elapsedTime; break; case "animationend": li.innerHTML = "Ended: elapsed time is " + e.elapsedTime; break; case "animationiteration": li.innerHTML = "New loop started at time " + e.elapsedTime; break; } document.getElementById("output").appendChild(li); } ~~~ 上面代碼的運行結果是下面的樣子。 ~~~ Started: elapsed time is 0 New loop started at time 3.01200008392334 New loop started at time 6.00600004196167 Ended: elapsed time is 9.234000205993652 ~~~ animation-play-state屬性可以控制動畫的狀態（暫停/播放），該屬性需求加上瀏覽器前綴。 ~~~ element.style.webkitAnimationPlayState = "paused"; element.style.webkitAnimationPlayState = "running"; ~~~ ## 參考鏈接 * David Walsh,?[Add Rules to Stylesheets with JavaScript](http://davidwalsh.name/add-rules-stylesheets) * Mozilla Developer Network,?[Using CSS animations](https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations) * Ryan Morr,?[Detecting CSS Style Support](http://ryanmorr.com/detecting-css-style-support/) * Mozilla Developer Network,?[Testing media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries) * Robert Nyman,?[Using window.matchMedia to do media queries in JavaScript](https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/)