CSS 操作 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## getAttribute 操作 css ``` div.setAttribute( 'style', 'background-color:red;' + 'border:1px solid black;' ); //or e.style.fontSize = '18px'; e.style.color = 'black'; ``` ## CSSStyleDeclaration 接口 ### 實例屬性獲取實例 `var divStyle = document.querySelector('div').style` #### cssText ``` var divStyle = document.querySelector('div').style; divStyle.cssText = 'background-color: red;' + 'border: 1px solid black;' + 'height: 100px;' + 'width: 100px;'; ``` //刪除行內樣式 `divStyle.cssText = ''; ` #### length ``` // <div id="myDiv" // style="height: 1px;width: 100%;background-color: #CA1;" // ></div> var myDiv = document.getElementById('myDiv'); var divStyle = myDiv.style; divStyle.length // 3 ``` ### 實例方法 #### getPropertyValue() 參數屬性名,返回屬性值 ``` // <div id="myDiv" style="margin: 10px!important; color: red;"/> var style = document.getElementById('myDiv').style; style.margin // "10px" style.getPropertyValue("margin") // "10px" ``` #### removeProperty() 移除屬性 ``` style.removeProperty('color') // 'red' ``` #### item() 整數參數,返回屬性名 ``` style.item(0) //等效 style[0] ``` #### setProperty() 參數,樣式名,樣式值 ``` style.setProperty('border', '1px solid blue'); ``` ## CSS 模塊的偵測-判斷瀏覽器是否支持某個屬性存在返回字符串,沒有設置返回空字符串,不支持返回 `undefined` 需要考慮不同瀏覽器的前綴 ``` typeof element.style.animationName === 'string'; typeof element.style.transform === 'string'; ``` ## CSS 對象 ### CSS.escape() 轉義css 選擇選擇器中的特殊字符 ``` <div id="foo#bar"> document.querySelector('#' + CSS.escape('foo#bar')) //#foo\#bar ``` ### CSS.supports() 判斷當前是否支持css規則 ``` // 第一種寫法 CSS.supports('transform-origin', '5px') // true // 第二種寫法 CSS.supports('display: table-cell') // true 結尾不可帶分號 ``` ### window.getComputedStyle() 最終樣式 ``` var div = document.querySelector('div'); var styleObj = window.getComputedStyle(div); styleObj.backgroundColor ``` 第二元素設置偽元素 `var result = window.getComputedStyle(div, ':before'); ` 注意: * CSSStyleDeclaration 實例返回的 CSS 值都是絕對單位。比如，長度都是像素單位（返回值包括`px`后綴），顏色是`rgb(#, #, #)`或`rgba(#, #, #, #)`格式。 * CSS 規則的簡寫形式無效。比如，想讀取`margin`屬性的值，不能直接讀，只能讀`marginLeft`、`marginTop`等屬性；再比如，`font`屬性也是不能直接讀的，只能讀`font-size`等單個屬性。 * 如果讀取 CSS 原始的屬性名，要用方括號運算符，比如`styleObj['z-index']`；如果讀取駱駝拼寫法的 CSS 屬性名，可以直接讀取`styleObj.zIndex`。 * 該方法返回的 CSSStyleDeclaration 實例的`cssText`屬性無效，返回`undefined`。 ### StyleSheet 接口 ``` var sheets = document.styleSheets; var sheet = document.styleSheets[0]; sheet instanceof StyleSheet // true ```