關於js修改三種css樣式的方法

晚上隨便寫了一個demo，要用js通過特定的方式來修改圖片的定位，還有width和height等，完成預想的動畫。

遇到的問題是：

最開始在.css文件里面設置了圖片的position：absolute；left等屬性，現在想要把他的left設置為left -=left+temp；即要獲取元素的left。

之前沒有細想，每次都是$(“img”).style.left就可以了，不過這次alert出來的居然是空字符串。 現在想想 .style獲取的應該是標簽的style屬性，然后依次獲取其他子屬性。所以.style.只能獲取行內樣式。。於是想方設法的去搞到.css里面的屬性。

深入

怎么才能獲取 head中style的css 或者 .css文件中的屬性呢？

IE中使用的是obj.currentStyle方法，FF是用的是getComputedStyle 方法。

function getDefaultStyle(obj,attribute){ 
        return obj.currentStyle ? obj.currentStyle[attribute]
            : document.defaultView.getComputedStyle(obj,false)[attribute];   
}

或者：

function getDefault(obj){ 
          return obj.currentStyle ?  obj.currentStyle
            :document.defaultView.getComputedStyle(obj,false);   
}

例子： 使用javascript更改某個css class的屬性…

.orig { 
        display: none; 
} 

 

你想要改變把他的display屬性由none改為inline。 解決辦法： 在IE里：

document.styleSheets[0].rules[0].style.display = "inline";

在firefox里：

document.styleSheets[0].cssRules[0].style.display = "inline";

討論： 可以做一個函數來搜索特定名字的style對象：

function getstyle(sname) { 
    for (var i=0;i< document.styleSheets.length;i++) { 
        var rules; 
        if (document.styleSheets[i].cssRules) { 
            rules = document.styleSheets[i].cssRules; 
        } else { 
            rules = document.styleSheets[i].rules; 
        } 
        for (var j=0;j< rules.length;j++) { 
            if (rules[j].selectorText == sname) { 
                return rules[j].style; 
            } 
        } 
    } 
}

然后只要：

getstyle(".orig").display = "inline";

總結：

前面說的是怎樣查詢或修改外鏈的.css，不過，不行的是，我們不能這樣做。 在ie和firefox里面確實可以實現，不過我們不提倡。

在chrome里面的cssRules會是null，stackoverflow里面說的是跨域，不過也不存在吧，。 所以，最好的方式還是直接修改dom里面的屬性。

弄了一晚上，算是弄得比較明白了。有些細節要去追究一下，才能得到更多的東西。雖然自己想要的沒有得到，不過卻可以得到很多收獲。