国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

原生javascript獲取元素樣式

2019-11-20 13:31:41
字體:
來源:轉載
供稿:網友

摘要:
    我們在開發過程中經常會遇到通過js獲取或者改變DOM元素的樣式,方法有很多,比如:通過更改DOM元素的class。現在我們討論原生js來獲取DOM元素的CSS樣式,注意是獲取不是設置

    在開始之前先說下獲取最終應用在元素上的所有CSS屬性對象的意思是,如果沒有給元素設置任何樣式,也會把瀏覽器默認的樣式返回來。

1、ele.style
    在學習DOM的時候就看到通過ele.style來獲取元素樣式值,但是有時候獲取的并非是節點的樣式值,而是空值。這是因為ele.style只能獲取寫在元素標簽中的style屬性里的樣式值,無法獲取到定義在<style></style>和通過<link href="css.css">加載進來的樣式屬性

    例子:

復制代碼 代碼如下:

        var test = document.getElementById("test");
        //獲取節點的color
        test.style.color;

2、getComputedStyle()
    getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。

    語法如下:

        window.getComputedStyle("元素", "偽類");

    這個方法接受兩個參數:要取得計算樣式的元素和一個偽元素字符串(例如“:before”) 。如果不需要偽元素信息,第二個參數可以是null。也可以通過document.defaultView.getComputedStyle("元素", "偽類");來使用

    例子:

復制代碼 代碼如下:

        var test = document.getElementById("test"),
        demo = window.getComputedStyle(test, null);
        //獲取節點的color
         demo.color 

    注意:Firefox和Safari會將顏色轉換成rgb格式,如果test節點上沒有任何樣式,通過style.length來查看瀏覽器默認樣式的個數。IE6-8不支持該方法,需要使用下面的方法

3、ele.currentStyle
    currentStyle是IE瀏覽器自己的一個屬性,其語法與ele.style類似,差別在于element.currentStyle返回的是元素當前應用的最終CSS屬性值(包括外鏈CSS文件,頁面中嵌入的<style>屬性等)。

    語法:

        var style = dom.currentStyle;

    例子:

復制代碼 代碼如下:

        var test = document.getElementById("test"),
        demo = test.currentStyle;
        //獲取節點的color
        demo.color;

     注意:對于綜合屬性border等,ie返回undefined,其他瀏覽器有的返回值,有的不返回,但是borderLeftWidth這樣的屬性是返回值的

4、getPropertyValue()
    getPropertyValue獲取CSS樣式的直接屬性名稱

    語法如下:

        window.getComputedStyle(element, null).getPropertyValue(屬性)

    例子:

復制代碼 代碼如下:

      var test = document.getElementById('test');
      window.getComputedStyle(test, null).getPropertyValue("background-color");

     注意:屬性名不支持駝峰格式,IE6-8不支持該方法,需要使用下面的方法

5、getAttribute
    getAttribute與getPropertyValue類似,有一點的差異是屬性名駝峰格式

    例子:

復制代碼 代碼如下:

        var test = document.getElementById('test');
        window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

    注意:該方法只支持IE6-8

小結:
    jQuery的CSS()方法,其底層運作就應用了getComputedStyle以及getPropertyValue方法,當我們使用原生的js開發時就可以通過以上方法獲取元素的值。

下面是一個兼容ie,firefox,chrome等瀏覽器的獲取元素樣式的方法,可以應用到項目中

復制代碼 代碼如下:

 function getStyle(ele) {
     var style = null;
    
     if(window.getComputedStyle) {
         style = window.getComputedStyle(ele, null);
     }else{
         style = ele.currentStyle;
     }
    
     return style;
 }

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 五指山市| 津市市| 华阴市| 桃江县| 金山区| 富阳市| 额尔古纳市| 前郭尔| 江阴市| 江永县| 十堰市| 东丽区| 南靖县| 合阳县| 兖州市| 奉节县| 建湖县| 阿坝| 祁阳县| 靖州| 灵石县| 岐山县| 克东县| 桃源县| 资兴市| 叶城县| 梓潼县| 霍州市| 江山市| 射阳县| 西畴县| 雅江县| 措勤县| 玉溪市| 砚山县| 延庆县| 抚松县| 广饶县| 麟游县| 黔南| 阿拉善右旗|