(90)Wangdao.com第二十三天_JavaScript CSS 操做

時間 2019-11-08

標籤 wangdao.com wangdao com 第二十三天 3天 javascript css 欄目 JavaScript 简体版

原文原文鏈接

CSS 操做css

經過 JavaScript 操做 CSShtml

HTML 元素的 style 屬性

<div style="background-color:red; border:1px solid black;" />

- 使用 .getAttribute() 方法、.setAttribute() 方法和 .removeAttribute() 方法，直接讀寫或刪除網頁元素的 style 屬性
  - ```
  div.setAttribute("style'",
      "background-color:red; border:1px solid black;"
  );
```

style 屬性的值是一個 CSSStyleDeclaration 實例，用來操做元素的樣式，不過，連詞號須要變成駱駝拼寫法
- 操做屬性時的規則
  - 將橫槓從 CSS 屬性名中去除，而後將橫槓後的第一個字母大寫
  - 對象的屬性值都是字符串，設置時必須包括單位
  - 若是 CSS 屬性名是 JavaScript 保留字，則規則名以前須要加上字符串 css
    - ele.style.backgroundColor // 對應css 屬性 background-color ele.style.cssFloat // 對應 css 屬性 float
  - 注意：
    - Element.style返回的只是行內樣式，並不是該元素的所有樣式。
    - 元素的所有樣式要經過 window.getComputedStyle(obj, null)["attr"] 獲得。（IE8 下使用ele.currentStyle["attr"]）

- ele.style.實例屬性
  - - ele.style.cssText
      - 讀寫元素的全部行內樣式，以字符串形式返回
      - 不用改寫 CSS 屬性名
      - 清空元素的行內樣式，最簡便的方法就是設置 cssText 爲空字符串
        
        <div id="ele" style="background:yellow"></div>web
        
        ele.style.cssText; // 返回字符串 "background:yellow"數組
        
        ele.style.cssText = ""; // 清空行內樣式瀏覽器

- - - ele.style.length
      - 返回一個整數值，表示元素行內樣式包含多少條樣式聲明

- - - ele.style.parentRule
      - 返回當前規則所屬的那個樣式塊（CSSRule 實例）。若是不存在所屬的樣式塊，該屬性返回 null

- - - - 屬性只讀，且只在使用 CSSRule 接口時有意義

- ele.style.實例方法
  - - ele.style.getPropertyPriority()
      - 判斷元素的某個屬性是否加了 important 優先級
        
        以某個屬性名做爲參數，返回一個字符串
        
        若是該屬性設置了 important，則返回 "important"
        
        不然返回空字符串 ""

- - - ele.style.getPropertyValue()
      - 返回元素某屬性的屬性值
        
        以某屬性名爲參數，返回一個字符串

- - - ele.style.item()
      - 接受一個整數值做爲參數，返回該索引位置的 CSS 屬性名

- - - ele.style.removeProperty()
      - 刪除行內式某屬性，返回被刪除屬性的舊屬性值

- - - ele.style.setProperty(屬性名，屬性值，優先級)
      - 設置新的 CSS 屬性。沒有返回值
      - 優先級可選，惟一合法值：improtant

CSS 模塊的偵測

判斷當前瀏覽器是否支持某個模塊app

element.style.attrName 的返回值

若是該 CSS 屬性確實存在
- 會返回一個字符串
- 即便該屬性實際上並未設置，也會返回一個空字符串
若是該屬性不存在，則會返回 undefined

偵測方法1

typeof element.style.attrName === 'string';

// 注意，無論 CSS 屬性名的寫法帶不帶連詞線，屬性上都能反映出該屬性是否存在
styleele.style['backgroundColor'] // "" === "string" 返回 true
document.body.style['background-color'] // "" === "string" 返回 true

// 使用的時候，須要把不一樣瀏覽器的 CSS 前綴也考慮進去
ele.style['-webkit-animation'] === 'string'

封裝該偵測方法

function isPropertySupported(cssPropStr) {
    if (cssPropStr in document.body.style){
        return true;
    }
    var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
    var prefProperty = cssPropStr.charAt(0).toUpperCase() + cssPropStr.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

瀏覽器原生提供 CSS 對象，目前有兩個靜態方法

CSS.escape()

轉義 CSS 選擇器裏面的特殊字符

document.querySelector('#' + CSS.escape('foo#bar'));

// #號，該字符在 CSS 選擇器裏面有特殊含義
// 不能直接寫成 document.querySelector('#foo#bar')
// 只能寫成 document.querySelector('#foo\\#bar')    // 這裏必須使用雙斜槓的緣由是，單引號字符串自己會轉義一次斜槓

- CSS.supports()
  - 判斷當前環境是否支持某一句 CSS 樣式
  - 參數有兩種寫法
    - 第一個參數是屬性名，第二個參數是屬性值
      - // 第一種寫法 CSS.supports('transform-origin', '5px'); // true
    - 整個參數就是一行完整的 CSS 語句
      - // 第二種寫法 CSS.supports('display: table-cell'); // true
      - 注意，第二種寫法的參數結尾不能帶有分號

高級瀏覽器 window.getComputedStyle()
- 獲取元素的實際樣式，瀏覽器計算後獲得的最終樣式信息
- 注意：

- - CSSStyleDeclaration 實例返回的 CSS 值都是絕對單位。
    - 好比，長度都是像素單位（返回值包括px後綴），顏色是rgb(#, #, #)或rgba(#, #, #, #)格式。
  - CSS 規則的簡寫形式無效。
    - 好比，想讀取 margin 屬性的值，不能直接讀，只能讀 marginLeft、marginTop 等屬性；
    - 再好比，font 屬性也是不能直接讀的，只能讀 font-size 等單個屬性。
  - 若是讀取 CSS 原始的屬性名，要用方括號運算符，好比 ele.style['z-index']；
  - 若是讀取駱駝拼寫法的 CSS 屬性名，能夠直接讀取 ele.style.zIndex。
  - 該方法返回的 CSSStyleDeclaration 實例的 cssText 屬性無效，返回 undefined

- 它接受一個節點對象做爲參數，返回一個 CSSStyleDeclaration 實例（動態對象，只讀）

- 還能夠接受第二個參數，表示當前元素的僞元素（好比 :before、:after、:first-line、:first-letter 等）
  - ```
  var result = window.getComputedStyle(ele, ':before')["background"];
```

CSS 僞元素

經過 CSS 向 DOM 添加的元素函數

主要是經過 :before 和 :after 選擇器生成，而後用 content 屬性指定僞元素的內容flex

// <div id="test">Test content</div>

#test:before {
    content: 'Before ';
    color: #FF0;
}



var test = document.getElementById('#test');

// 節點元素的 style 對象沒法讀寫僞元素的樣式
var result = window.getComputedStyle(test, ':before').content; var color = window.getComputedStyle(test, ':before').color;

StyleSheet 對象

表明網頁的一張樣式表，包括行內樣式表，內部樣式表，外部樣式表ui

嚴格來講，不只包括網頁樣式表，還包括 XML 文檔的樣式表spa

document.styleSheets 返回一個相似數組的對象，表明當前頁面的全部 StyleSheet 實例（即全部樣式表）

若是是 <style> 元素的內部樣式表，還能夠經過 style 元素節點 sheet 屬性獲取 StyleSheet 對象

// <style id="myStyle">

// </style>


var myStyleSheet = document.getElementById('myStyle').sheet;
myStyleSheet instanceof StyleSheet;    // true

- StyleSheet 的實例屬性
  - - StyleSheet.disabled
      - 表示該樣式表是否處於禁用狀態，爲 true 時，目標樣式不會生效
        
        注意，disabled 屬性只能在 JavaScript 腳本中設置，不能在 HTML 語句中設置

- - - Stylesheet.href
      - 返回樣式表的網址。
        
        對於內嵌樣式表，該屬性返回 null
        
        屬性只讀
        
        document.styleSheets[0].href

- - - StyleSheet.media
      - 返回一個相似數組的對象（MediaList實例），成員是表示適用媒介的字符串。
        
        表示當前樣式表是用於屏幕（screen），仍是用於打印（print）或手持設備（handheld），或各類媒介都適用（all）
        
        該屬性只讀，默認值是 screen
        
        MediaList.appendMedium()，用於增長媒介
        
        MediaList.deleteMedium()，用於刪除媒介

- - - StyleSheet.cssRules
      - 指向一個相似數組的對象（CSSRuleList實例），裏面每個成員就是當前樣式表的一條 CSS 規則

實例方法
- CSSStyleSheet.insertRule()
  - - 用於在當前樣式表的插入一個新的 CSS 規則

- - - 第一個參數是表示 CSS 規則的字符串，這裏只能有一條規則，不然會報錯。
    - 第二個參數是該規則在樣式表的插入位置（從0開始），該參數可選，默認爲0（即默認插在樣式表的頭部）。
      - 注意，若是插入位置大於現有規則的數目，會報錯
        
        var sheet = document.querySelector('#styleElement').sheet; sheet.insertRule('#block { color: white }', 0); sheet.insertRule('p { color: red }', 1);
        
        瀏覽器對腳本在樣式表裏面插入規則有不少限制。因此，這個方法最好放在 try...catch 裏使用

CSSRule 實例的屬性
- CSSRule.cssText
- CSSRule.parentStyleSheet
- CSSRule.parentRule
- CSSRule.type 表示當前樣式規則的類型

1 普通樣式規則（CSSStyleRule 實例）

3 @import規則

media 屬性返回表明@media規則的一個對象

conditionText 屬性返回@media規則的生效條件

// HTML 代碼以下
// <style id="myStyle">
//   @media screen and (min-width: 900px) {
//     article { display: flex; }
//   }
// </style>
var styleSheet = document.getElementById('myStyle').sheet;
styleSheet.cssRules[0] instanceof CSSMediaRule
// true

styleSheet.cssRules[0].media
//  {
//    0: "screen and (min-width: 900px)",
//    appendMedium: function,
//    deleteMedium: function,
//    item: function,
//    length: 1,
//    mediaText: "screen and (min-width: 900px)"
// }

styleSheet.cssRules[0].conditionText
// "screen and (min-width: 900px)"

4 @media規則（CSSMediaRule 實例）
5 @font-face規則

window.matchMedia()
- 建立 MediaQueryList 對象來存放媒體查詢的結果
- 用來將 CSS 的 MediaQuery 條件語句，轉換成一個 MediaQueryList 實例
  - 設置一個查詢列表用來斷定設備屏幕處於橫屏仍是豎屏
    - var mql = window.matchMedia("(orientation: portrait)");
- mql.media
  - 屬性返回一個字符串，表示對應的 MediaQuery 條件語句
    - var mql = window.matchMedia('(min-width: 400px)'); mql.media // "(min-width: 400px)"

- mql.matches
  - 返回一個布爾值，表示當前頁面是否符合指定的 MediaQuery 條件語句
  - 經過檢查相應查詢的 matches 屬性來獲取查詢結果，上述屬性會直接返回查詢結果
  - 下面的例子根據 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); }
- mql.onchange
  - 若是 mql 條件語句的適配環境發生變化，會觸發 change 事件
    - var mql = window.matchMedia('(max-width: 600px)'); mql.onchange = function(e) { if (e.matches) { /* 視口不超過 600 像素 */ } else { /* 視口超過 600 像素 */ } }
    - 上面代碼中，change事件發生後，存在兩種可能。
      - 一種是顯示寬度從700像素以上變爲如下
      - 另外一種是從700像素如下變爲以上，
    - 因此在監聽函數內部要判斷一下當前是哪種狀況

MediaQueryList 接口的實例方法
- MediaQueryList.addListener()

- MediaQueryList.removeListener()

var mql = window.matchMedia('(max-width: 600px)');

// 指定監聽函數
mql.addListener(mqCallback); 
 // 撤銷監聽函數
mql.removeListener(mqCallback); function mqCallback(e) {
    if (e.matches) {
        /* 視口不超過 600 像素 */
    } else {
        /* 視口超過 600 像素 */
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。