<address id="lrx17"><dfn id="lrx17"><mark id="lrx17"></mark></dfn></address>

<sub id="lrx17"><listing id="lrx17"><mark id="lrx17"></mark></listing></sub>

      <address id="lrx17"></address>
    <sub id="lrx17"></sub>

    <font id="lrx17"><var id="lrx17"><output id="lrx17"></output></var></font>

    <sub id="lrx17"><var id="lrx17"><output id="lrx17"></output></var></sub>

    <address id="lrx17"><dfn id="lrx17"></dfn></address>
      <address id="lrx17"></address>

    原生JS讀寫CSS樣式的方法

    2020/11/25 17:55:43   閱讀:1476    發布者:1476

    • 通過Element對象的getAttribute()、setAttribute()、removeAttribute()直接讀寫style屬性

            如:elm.setAttribute('style','color:red;line-height:30px');


    • 利用document.styleSheets屬性,返回當前頁面的所有StyleSheet對象(即所有樣式表),它是一個只讀的類數組對象,它的元素是CSSStyleSheet對象(繼承自StyleSheet對象),該對象的屬性方法如下:
            屬性:
                    1.cssRules類數組對象,元素是樣式表中CSS規則CSSStyleRule對象;IE9以下為rules;
                    2.disabled屬性用于打開或關閉一張樣式表,值為true或disabled;
                    3.ownerNode屬性返回StyleSheet對象所在的DOM節點,通常是<link>或<style>。對于那些由其他樣式表引用的樣式表,該屬性為null;
                    4.因為CSS的@import命令允許在樣式表中加載其他樣式表,就有了parentStyleSheet屬性,它返回包括了當前樣式表的那張樣式表。如果當前樣式表是頂層樣式表,則該屬性返回null;
                    5.type屬性返回StyleSheet對象的type值,通常是text/css;
                    6.title屬性返回StyleSheet對象的title值;
                    7.href屬性是只讀屬性,返回StyleSheet對象連接的樣式表地址。對于內嵌的style節點,該屬性等于null;
                    8.media屬性表示這個樣式表是用于屏幕(screen),還是用于打?。╬rint),或兩者都適用(all),該屬性只讀,默認值是screen;
            方法:deleteRule()從樣式表中刪除一條規則,insertRule()向樣式表中插入一條新規則,IE9以下為addRule()、removeRule();
               如: document.styleSheets[0].insertRule('#test:hover{color: white;}',0);
    document.styleSheets[0].deleteRule(0); //刪除樣式表中的第一條規則
    document.styleSheets[0].cssRules[1].selectorText; //返回選擇器字符串
    document.styleSheets[0].cssRules[1].cssText; //返回規則字符串,含選擇器
    document.styleSheets[0].cssRules[1].style.border;
    document.styleSheets[0].cssRules[1].style.cssText; //返回當前規則的所有樣式聲明字符串


    • 可以通過DOM節點對象的style對象(即CSSStyleDeclaration對象)來讀寫文檔元素的CSS樣式
                 如:var elm = document.getElementById('test');  elm.style.color = 'black';



    • 直接添加樣式表
            1.創建標簽<style>添加一張內置樣式表
                var style1 = document.createElement('style');
                style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color: white;}';
                document.head.appendChild(style1);
            2.另一種是添加外部樣式表,即在文檔中添加一個link節點,然后將href屬性指向外部樣式表的URL
                var link1 = document.createElement('link');
                link1.setAttribute('rel', 'stylesheet');
                link1.setAttribute('type', 'text/css');
                link1.setAttribute('href', 'reset-min.css');
                document.head.appendChild(link1);


    • 用window對象的getComputedStyle方法,第一個參數是Element對象,第二個參數可以是null、空字符串、偽元素字符串,該方法返回一個只讀的表示計算樣式的CSSStyleDeclaration對象,它代表了實際應用在指定元素上的最終樣式信息,即各種CSS規則疊加后的結果;
            如:var color = window.getComputedStyle(elm, ':before').color;
                    var color = window.getComputedStyle(elm, ':before').getPropertyValue('color');
            或:var color = window.getComputedStyle(elm, null).color;
     
            表示計算樣式的CSSStyleDeclaration對象與表示內聯樣式的CSSStyleDeclaration對象的區別:
                1.計算樣式的屬性是只讀的;
                2.計算樣式的值是絕對值,類似百分比和點之類相對的單位將全部轉換為以'px'為后綴的字符串絕對值,其值是顏色的屬性將以“rgb(#,#,#)”或“rgba(#,#,#,#)”的格式返回;
                3.不計算復合屬性,只基于最基礎的屬性,如不要查詢margin,而單獨查詢marginTop等;
                4.計算樣式對象未定義cssText屬性;
                5.計算樣式同時具有欺騙性,使用時需注意,在查詢某些屬性時的返回值不一定精準,如查詢font-family;
                6.IE9以下不支持getComputedStyle方法,IE的Element對象有currentStyle屬性;
     
    • 通過CSSStyleDeclaration對象的cssText屬性和setProperty()、removeProperty等方法
    如:elm.style.cssText ='color:red;line-height:30px';
                      elm.style.removeProperty('color');
                         elm.style.setProperty('color', 'green', 'important');
                            elm.style.cssText = ''; //快速清空該規則的所有聲明
            每一條CSS規則的樣式聲明部分(大括號內部的部分),都是一個CSSStyleDeclaration對象,它的屬性和方法:
                屬性:
                    1.cssText:當前規則的所有樣式聲明文本。該屬性可讀寫,即可用來設置當前規則。
                    2.length:當前規則包含多少條聲明。
                    3.parentRule:包含當前規則的那條規則,同CSSRule接口的parentRule屬性。
                方法:
                    1.getPropertyPriority()方法返回指定聲明的優先級,如果有的話,就是“important”,否則就是空字符串;
                    2.getPropertyValue方法返回指定聲明的值;
                    3.item(index)方法返回指定位置的屬性名,一般用[index]語法更直接;
                    4.removeProperty方法用于刪除一條CSS屬性,返回被刪除的值;
                    5.setProperty方法用于設置指定的CSS屬性,沒有返回值;


     
    • window.matchMedia方法用來檢查CSS的mediaQuery語句。各種瀏覽器的最新版本(包括IE 10+)都支持該方法,對于不支持該方法的老式瀏覽器,可以使用第三方函數庫matchMedia.js;
                下面是mediaQuery語句的一個例子:
                    @media all and (max-device-width: 700px) {
                          body {background: #FF0;}
                    }
            window.matchMedia方法接受一個mediaQuery語句的字符串作為參數,返回一個MediaQueryList對象。該對象有以下兩個屬性:
            media:返回所查詢的mediaQuery語句字符串。
            matches:返回一個布爾值,表示當前環境是否匹配查詢語句。
                    var result = window.matchMedia('(max-width: 700px)');
                    if (result.matches) {
                          console.log('頁面寬度小于等于700px');
                    } else {
                          console.log('頁面寬度大于700px');

                    }
            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像素}
                    }
     
    本文參考:
    MDN: https://developer.mozilla.org/zh-CN/docs/Web/API
    https://www.cnblogs.com/susufufu/p/5749922.html
    欧美性开放BBW