獲取 style 值
style 也是元素對(duì)象的屬性惧笛，它的值不是字符串，而是一個(gè) CSSStyleDeclaration 對(duì)象理朋。
坑：
this.style.color; // 直接獲取顏色
this.style.width; // 直接獲取寬度
由于 style 只會(huì)獲取或設(shè)置內(nèi)聯(lián)樣式，所以，假如已存在的內(nèi)聯(lián)樣式屬性會(huì)被獲取驶乾，不是內(nèi)聯(lián)樣式的屬性值會(huì)是空字符串。查詢?cè)貥邮窖梢允褂糜?jì)算樣式级乐。
使用
getAttribute("style")或style.cssText查詢的是內(nèi)聯(lián)樣式的屬性和值的字符串，不是內(nèi)聯(lián)樣式的屬性值是null和空字符串县匠。使用
setAttribute("style",'xx:xxx;')或style.cssText='xx:xxx;'也是設(shè)置內(nèi)聯(lián)樣式风科，同時(shí)使用后面會(huì)覆蓋前面的設(shè)置。
元素的計(jì)算樣式是一組屬性值乞旦，它由瀏覽器通過把內(nèi)聯(lián)樣式結(jié)合所有樣式表中所有可應(yīng)用的樣式規(guī)則后計(jì)算得到的贼穆。它是一組在顯示元素時(shí)實(shí)際使用的屬性值。計(jì)算樣式也是用一個(gè) CSSStyleDeclaration 對(duì)象來表示兰粉，但計(jì)算樣式是只讀的故痊。
使用瀏覽器窗口對(duì)象的getComputedStyle(ele,null)方法來獲取一個(gè)元素的計(jì)算樣式。第一個(gè)參數(shù)是要獲取計(jì)算樣式的元素玖姑，第二個(gè)參數(shù)也是必須的愕秫，通常是null或空字符串慨菱，但也可以是命名 CSS 偽對(duì)象的字符串，如:before戴甩、:after符喝、:first-line、:first-letter等恐。
getComputedStyle()方法返回值是一個(gè) CSSStyleDeclaration 對(duì)象洲劣，它代表了應(yīng)用在指定元素或偽對(duì)象上的所有樣式。
表示計(jì)算樣式的 CSSStyleDeclaration 對(duì)象和表示內(nèi)聯(lián)樣式的對(duì)象之間的區(qū)別：
- 計(jì)算樣式的屬性是只讀的课蔬。
- 計(jì)算樣式的值是絕對(duì)值：類似百分百和點(diǎn)之類相對(duì)的單位將全部轉(zhuǎn)換為絕對(duì)值囱稽。所有指定尺寸的屬性都有一個(gè)以像素為單位的值。該值是以
px為后綴的字符串二跋，使用時(shí)仍然需要解析它战惊，但不用擔(dān)心單位的解析或轉(zhuǎn)換。其值是顏色的屬性以rgb(#,#,#)或rgba(#,#,#,#)的格式返回扎即。 - 不計(jì)算符合屬性吞获。只基于最基礎(chǔ)的屬性。如谚鄙，不要查詢
margin屬性各拷，而應(yīng)該使用marginLeft或marginTop等。 - 計(jì)算樣式的
cssText屬性未定義闷营。
如下例子使用查詢計(jì)算樣式和內(nèi)聯(lián)樣式：
// 用指定的參數(shù)縮放元素e的字體大小
function scale(e,factor){
// 用計(jì)算樣式查詢當(dāng)前字體大小
var size = parseInt(window.getComputedStyle(e,'').fontSize);
// 用內(nèi)聯(lián)樣式來設(shè)置字體大小
e.style.fontSize = factor * size + 'px';
}
// 用指定的參數(shù)修改元素e的背景顏色 factor>1顏色變淺 factor<1顏色變暗
function scaleColor(e,factor){
var color = window.getComputedStyle(e,'').backgroundColor;
var components = color.match(/[\d\.]+/g); // 將r g b a的值放到數(shù)組中
for(var i=0; i<3; i++){
var x = Number(components[i] * factor);
x = Math.round(Math.min(Math.max(x,0),255)); // 設(shè)置邊界并取整
components[i] = String(x);
}
if(components.length == 3){ // rgb
e.style.backgroundColor = 'rgb(' + components.join() + ')';
}else{ // rgba
e.style.backgroundColor = 'rgba(' + components.join() + ')';
}
}
** 計(jì)算樣式也有坑烤黍，例如查詢fontFamily屬性時(shí)，得到的值可能是類似于arial,helvetica,sans-serif而不會(huì)知道實(shí)際使用了哪種字體傻盟。類似的速蕊，如果沒有絕對(duì)定位元素，試圖通過計(jì)算樣式的top和left屬性查詢它的位置和尺寸通常會(huì)返回auto娘赴。**
