在使用dom操作行內樣式和當前樣式時，需要注意的問題很多
特別是瀏覽器的兼容性問題
首先是操作行內樣式‘先來看看簡單的例子代碼
<script type="text/javascript">
window.onload=function(){
//點擊按鈕修改box1大小
//獲取box1
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1");
btn1.onclick=function(){
//在這之中通過語法：元素.style.樣式名=樣式值;來修改行內樣式
box1.style.width="250px";
alert(box1.style.width);
}
//讀取樣式
var btn2=document.getElementById("btn2");
btn2.onclick=function(){
//通過語法：元素.style.樣式名;來讀取行內樣式
}
}
</script>
這是一個通過點擊按鈕修改元素屬性的代碼，淺顯易懂
但要注意類似于background-color之類的屬性要使用駝峰書寫
即backgroundColor
樣式中也盡量不要出現！important，優先級過高會導致js代碼無法讀取行內樣式，
第二個就是獲取當前樣式啦，這個細節比較多
先上代碼：
<script type="text/javascript">
window.onload=function(){
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1");
btn1.onclick=function(){
//在這之中通過語法：元素.currentStyle.樣式名=樣式值;來查看當前顯示的樣式,只兼容ie
//alert(box1.currentStyle.width);
//兼容其他瀏覽器，則使用getComputedStyle()
//兩個引數，一個是元素，一個是null
alert(getComputedStyle(box1,null).width);
}
</script>
這里就出現了兩個方式：
1.currentStyle屬性（只兼容ie）555，ie終于爭氣了一回
語法在代碼注釋中也很清楚
2.getComputedStyle( )方法，兼容其他瀏覽器
這個方法的回傳值是一個物件，封裝了當前元素的對應樣式
語法在代碼注釋里有
但是，如果想要任何瀏覽器都兼容的話，那怎么辦呢？
這個時候就需要我們自己來寫一個函式
廢話不多說，上代碼
<script type="text/javascript">
//兼容所有瀏覽器，自己寫一個函式
//引數：obj 需要獲取的樣式元素 name 需要獲取的樣式名
function getStyle(obj,name){
if(window.getComputedStyle){
//必須用window.，因為后面那個屬性是變數，全域作用域和區域作用域中都沒有定義
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
</script>
這個就是能兼容所有瀏覽器的方法啦，
有一些細節展示在了代碼注釋里
比如window.getComputedStyle前面必須要有window，否則會報錯，因為瀏覽器引擎是從函式內搜到外，直到全域作用域，而這個getComputedStyle是一個變數，在全域作用域中沒有定義，
另外值得一提的是，通過currentStyle和getComputedStyle（）獲取的屬性都是只讀不修改的哦，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/272321.html
標籤：其他