如果我想獲取某乙個具體的樣式屬性值
需要我們把元素的樣式都寫在行內樣式上才可以(寫在樣式表中是不管用的)
真是專案中, 這種方法不常用, 因為不能為了獲取值而把所有的樣式都寫在行內(無法實現css和html的分離)
使用window.getcomputedstyle這個方法獲得所有經過瀏覽器計算過的樣式
所有經過瀏覽器計算過的樣式:
只要當前的元素標籤可以在頁面中呈現出來, 那麼它的所有的樣式都是經過瀏覽器計算過的(渲染過的), 哪怕有些樣式你沒有寫, 我們也可以獲取到.
window.getcomputedstyle(當前要操作的元素物件, 當前元素的偽類), 一般我們不用偽類, 寫null
window.getcomputedstyle(element, null).width方法雖然好用, 但是在ie6-8下是不相容的:在ie6-8下我們可以使用currentstyle來獲取所有當前計算過的所有樣式因為window下沒有getcomputedstyle這個屬性, 在ie6-8下執行這個方法會報錯
box.currentstyle.height前提, 必須保證try中的**在不相容瀏覽器中執行的時候報錯, 這樣的話我們才可以用catch捕獲到異常的資訊, 進行其他的處理.
不管當前是什麼瀏覽器, 都需要先把try中的**執行一遍, 如果當前是ie7, window.getcomputedstyle本身是不相容的, 但是我也要先把它執行一遍, 報錯了再把curele.currentstyle執行一遍(消耗效能)
只有在不得已的情況下才使用它
function getcss(curele, attr) catch(e)
return val;
}console.log(getcss(box, "height"));
function getcss(curele, attr) else
return val;
}console.log(getcss(box, "height"));
function getcss(curele, attr) else
return val;
}console.log(getcss(box, "height"));
function getcss(curele, attr) else
return val;
}console.log(getcss(box, "height"));
window.n**igator.useragent在獲取復合樣式時, 盡量拆開寫
初始化樣式
寫css的時候第一步初始化預設樣式, 避免瀏覽器之間的差異, 不僅如此, 而且寫的預設樣式對於js以後獲取的結果統一也是有幫助的.
*function getcss(curele, attr) else
reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val) ? parsefloat(val) : val;
} console.log(getcss(box, "height"));
console.log(getcss(box, "float"));
console.log(getcss(box, "border"));
200opacity, 是設定透明度, 在ie6-8中不相容none
10px solid rgb(0, 128, 0)
filter: alpha(opacity=10), 不相容的話使用filter獲得
function getcss(curele, attr) else else
}reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;
return reg.test(val) ? parsefloat(val) : val;
}
在ie6-8下獲取 alpha(opacity=10)後, 提取10並除以100獲得標準瀏覽器下的opaclity的值 0.1
js獲取元素具體樣式屬性值
需要把元素的樣式都寫在行內樣式上才可以 寫在樣式表中不起作用 在真實專案中，這種方式不常用 無法實現css和html分離 只要當前的元素標籤可以在頁面中呈現出來，那麼它的所有樣式都是經過瀏覽器計算過的 渲染過的 哪怕有些樣式沒有寫，我們也可以獲取到 window.getcomputedstyle 當...
js 獲取DOM元素樣式
html的樣式寫入方法有 1 行內樣式 2 內嵌樣式 3 外聯樣式表。行內樣式 一般是用style寫在dom元素上的，例如 內嵌樣式 一般是用style寫在head標籤內的。外聯樣式 一般是用link標籤或者是import引入的。但import引入的時候一定要放在style標籤內。獲採樣式 一 el...
js獲取元素的外鏈樣式
1 一般給元素設定行內樣式，如 如要獲取它的樣式，即可document.getelementbyid div1 style.width來獲取或設定。但是如果樣式是在外鏈link中的或者是頁面的非行內樣式，就獲取不到了。23 在標準瀏覽器中可以通過window.getcomputedstyll obj...