快捷導(dǎo)航

javascript 精確獲取樣式屬性（下）

更新時(shí)間：2010年01月02日 12:38:36 作者：

繼續(xù)上一部分，我們要看一下顏色。火狐好像不管三七二十一都會(huì)轉(zhuǎn)變?yōu)閞gb格式，不過(guò)我們通常比較習(xí)慣的是hex格式。這就用到以下兩函數(shù)。

 
var rgb2hex = function(rgb) { 
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
return "#"+tohex(rgb[1])+tohex(rgb[2])+tohex(rgb[3]) 
} 
var tohex = function(x) { 
var hexDigits = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; 
return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16]; 
} 

我們用正則表達(dá)式在檢測(cè)其是否為rgb格式，是就用rgb2hex來(lái)轉(zhuǎn)換它。但如果是red，green等值呢，火狐就一反常態(tài)，轉(zhuǎn)換為hex格式，但I(xiàn)E依然如故。我們沒(méi)有辦法，自己做一個(gè)哈希，把常用的顏色都弄進(jìn)去，然后一一匹對(duì)便是。

復(fù)制代碼代碼如下:

 
if(style.search(/background|color/) != -1) { 
var color = { 
aqua: '#0ff', 
black: '#000', 
blue: '#00f', 
gray: '#808080', 
purple: '#800080', 
fuchsia: '#f0f', 
green: '#008000', 
lime: '#0f0', 
maroon: '#800000', 
navy: '#000080', 
olive: '#808000', 
orange:'#ffa500', 
red: '#f00', 
silver: '#c0c0c0', 
teal: '#008080', 
transparent:'rgba(0,0,0,0)', 
white: '#fff', 
yellow: '#ff0' 
} 
if(!!color[value]){ 
value = color[value] 
} 
if(value == "inherit"){ 
return getStyle(el.parentNode,style); 
} 
if(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.test(value)){ 
return rgb2hex(value) 
}else if(/^#/.test(value)){ 
value = value.replace('#', ''); 
return "#" + (value.length == 3 ? value.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : value); 
} 
return value; 
} 

基本上是對(duì)于CSS的精確取值就是這樣，顯然它還存在許多不足之處，但對(duì)于布局用的和常用的樣式都實(shí)現(xiàn)了。還提供了一個(gè)判斷頁(yè)面渲染模式的常數(shù)q，為了方便，方法名與JQuery同名（只能取值，不能賦值，以后有空慢慢與我的addSheet函數(shù)整合到一起）。

復(fù)制代碼代碼如下:

 
(function(){ 
var isQuirk = (document.documentMode) ? (document.documentMode==5) ? true : false : ((document.compatMode=="CSS1Compat") ? false : true); 
var isElement = function(el) { 
return !!(el && el.nodeType == 1); 
} 
var propCache = []; 
var propFloat = !+"\v1" ? 'styleFloat' : 'cssFloat'; 
var camelize = function(attr){ 
return attr.replace(/\-(\w)/g, function(all, letter){ 
return letter.toUpperCase(); 
}); 
} 
var memorize = function(prop) { //意思為：check out form cache 
return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : camelize(prop)); 
} 
var getIEOpacity = function(el){ 
var filter; 
if(!!window.XDomainRequest){ 
filter = el.style.filter.match(/progid:DXImageTransform.Microsoft.Alpha\(.?opacity=(.*).?\)/i); 
}else{ 
filter = el.style.filter.match(/alpha\(opacity=(.*)\)/i); 
} 
if(filter){ 
var value = parseFloat(filter[1]); 
if (!isNaN(value)) { 
return value ? value / 100 : 0; 
} 
} 
return 1; 
} 
var convertPixelValue = function(el, value){ 
var style = el.style,left = style.left,rsLeft = el.runtimeStyle.left; 
el.runtimeStyle.left = el.currentStyle.left; 
style.left = value || 0; 
var px = style.pixelLeft; 
style.left = left;//還原數(shù)據(jù) 
el.runtimeStyle.left = rsLeft;//還原數(shù)據(jù) 
return px + "px" 
} 
var rgb2hex = function(rgb) { 
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
return "#"+tohex(rgb[1])+tohex(rgb[2])+tohex(rgb[3]) 
} 
var tohex = function(x) { 
var hexDigits = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; 
return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16]; 
} 
var getStyle = function (el, style){ 
var value; 
if(!+"\v1"){ 
//特殊處理IE的opacity 
if(style == "opacity"){ 
return getIEOpacity(el) 
} 
value = el.currentStyle[memorize(style)]; 
//特殊處理IE的height與width 
if (/^(height|width)$/.test(style)){ 
var values = (style == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0; 
if(isQuirk){ 
return el[camelize("offset-"+style)] + "px" 
}else{ 
var client = parseFloat(el[camelize("client-"+style)]), 
paddingA = parseFloat(getStyle(el, "padding-"+ values[0])), 
paddingB = parseFloat(getStyle(el, "padding-"+ values[1])); 
return (client - paddingA - paddingB)+"px"; 
} 
} 
}else{ 
if(style == "float"){ 
style = propFloat; 
} 
value = document.defaultView.getComputedStyle(el, null).getPropertyValue(style) 
} 
//下面部分全部用來(lái)轉(zhuǎn)換上面得出的非精確值 
if(!/^\d+px$/.test(value)){ 
//轉(zhuǎn)換可度量的值 
if(/(em|pt|mm|cm|pc|in|ex|rem|vw|vh|vm|ch|gr)$/.test(value)){ 
return convertPixelValue(el,value); 
} 
//轉(zhuǎn)換百分比，不包括字體 
if(/%$/.test(value) && style != "font-size"){ 
return parseFloat(getStyle(el.parentNode,"width")) * parseFloat(value) /100 + "px" 
} 
//轉(zhuǎn)換border的thin medium thick 
if(/^(border).+(width)$/.test(style)){ 
var s = style.replace("width","style"), 
b = { 
thin:["1px","2px"], 
medium:["3px","4px"], 
thick:["5px","6px"] 
}; 
if(value == "medium" && getStyle(el,s) == "none"){ 
return "0px"; 
} 
return !!window.XDomainRequest ? b[value][0] : b[value][1]; 
} 
//轉(zhuǎn)換margin的auto 
if(/^(margin).+/.test(style) && value == "auto"){ 
var father = el.parentNode; 
if(/MSIE 6/.test(navigator.userAgent) && getStyle(father,"text-align") == "center"){ 
var fatherWidth = parseFloat(getStyle(father,"width")), 
_temp = getStyle(father,"position"); 
father.runtimeStyle.postion = "relative"; 
var offsetWidth = el.offsetWidth; 
father.runtimeStyle.postion = _temp; 
return (fatherWidth - offsetWidth)/2 + "px"; 
} 
return "0px"; 
} 
//轉(zhuǎn)換top|left|right|bottom的auto 
if(/(top|left|right|bottom)/.test(style) && value == "auto"){ 
return el.getBoundingClientRect()[style]; 
} 
//轉(zhuǎn)換顏色 
if(style.search(/background|color/) != -1) { 
var color = { 
aqua: '#0ff', 
black: '#000', 
blue: '#00f', 
gray: '#808080', 
purple: '#800080', 
fuchsia: '#f0f', 
green: '#008000', 
lime: '#0f0', 
maroon: '#800000', 
navy: '#000080', 
olive: '#808000', 
orange:'#ffa500', 
red: '#f00', 
silver: '#c0c0c0', 
teal: '#008080', 
transparent:'rgba(0,0,0,0)', 
white: '#fff', 
yellow: '#ff0' 
} 
if(!!color[value]){ 
value = color[value] 
} 
if(value == "inherit"){ 
return getStyle(el.parentNode,style); 
} 
if(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/.test(value)){ 
return rgb2hex(value) 
}else if(/^#/.test(value)){ 
value = value.replace('#', ''); 
return "#" + (value.length == 3 ? value.replace(/^(\w)(\w)(\w)$/, '$1$1$2$2$3$3') : value); 
} 
return value; 
} 
} 
return value;//如 0px 
} 
var css = function(){ 
var a = arguments; 
if(a.length == 1){ 
return getStyle(this,a[0]) 
} 
} 
var _ = function(el){ 
var el = isElement(el)? el :document.getElementById(el); 
var gene = !el.constructor ? el : el.constructor.prototype; 
gene.css = css; 
gene.width = function(){ 
return getStyle(this,"width"); 
}; 
gene.height = function(){ 
return getStyle(this,"height"); 
}; 
return el 
} 
if(!window._){ //為了避免與JQuery的$發(fā)生沖突，我用_作為類庫(kù)唯一的全局變量 
window['_'] =_; 
} 
_.q = isQuirk; 
})() 

用法如下：

復(fù)制代碼代碼如下:

 
window.onload = function(){ 
alert(_("ccc").css("background-color")) 
alert(_("aaa").css("width")) 
alert(_(document.body).width()) 
}; 

我們可以用這個(gè)東西研究一下document.body與document.documentElement。

復(fù)制代碼代碼如下:

 
function text(){ 
var body = document.body,html = document.documentElement; 
_("w1").innerHTML = _(body).width(); 
_("w2").innerHTML = _(html).width(); 
_("h1").innerHTML = _(body).height(); 
_("h2").innerHTML = _(html).height(); 
_("ml1").innerHTML = _(body).css("margin-left"); 
_("ml2").innerHTML = _(html).css("margin-left"); 
_("mr1").innerHTML = _(body).css("margin-right"); 
_("mr2").innerHTML = _(html).css("margin-right"); 
_("mt1").innerHTML = _(body).css("margin-top"); 
_("mt2").innerHTML = _(html).css("margin-top"); 
_("mb1").innerHTML = _(body).css("margin-bottom"); 
_("mb2").innerHTML = _(html).css("margin-bottom"); 
_("pl1").innerHTML = _(body).css("padding-left"); 
_("pl2").innerHTML = _(html).css("padding-left"); 
_("pr1").innerHTML = _(body).css("padding-right"); 
_("pr2").innerHTML = _(html).css("padding-right"); 
_("bl1").innerHTML = _(body).css("border-left-width"); 
_("bl2").innerHTML = _(html).css("border-left-width"); 
_("br1").innerHTML = _(body).css("border-right-width"); 
_("br2").innerHTML = _(html).css("border-right-width"); 
_("qqq").innerHTML = !_.q ? "標(biāo)準(zhǔn)模式" : "怪癖模式"; 
_("t1").innerHTML = _(body).css("top"); 
_("t2").innerHTML = _(html).css("top"); 
_("l1").innerHTML = _(body).css("left"); 
_("l2").innerHTML = _(html).css("left"); 
_("ot1").innerHTML = body.offsetTop; 
_("ot2").innerHTML = html.offsetTop; 
_("ol1").innerHTML = body.offsetLeft; 
_("ol2").innerHTML = html.offsetLeft; 
_("ct1").innerHTML = body.clientTop; 
_("ct2").innerHTML = html.clientTop; 
_("cl1").innerHTML = body.clientLeft; 
_("cl2").innerHTML = html.clientLeft; 
_("cw1").innerHTML = body.clientWidth; 
_("cw2").innerHTML = html.clientWidth; 
_("ow1").innerHTML = body.offsetWidth; 
_("ow2").innerHTML = html.offsetWidth; 
_("sw1").innerHTML = body.scrollWidth; 
_("sw2").innerHTML = html.scrollWidth; 
} 

<!doctype html> <html dir="ltr" lang="zh-CN" id="html"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=8"> <style type="text/css"> html, body{ border: 0; } </style> <title>精確取值</title> </head> <body id="body"> <table border="1"> <thead> <th>測(cè)試屬性</th><th>document.body</th><th>document.documentElement</th> </thead> <tbody> <tr><th>width</th><td></td><td></td></tr> <tr><th>height</th><td></td><td></td></tr> <tr><th>margin-left</th><td></td><td></td></tr> <tr><th>margin-right</th><td></td><td></td></tr> <tr><th>margin-top</th><td></td><td></td></tr> <tr><th>margin-bottom</th><td></td><td></td></tr> <tr><th>padding-left</th><td></td><td></td></tr> <tr><th>padding-right</th><td></td><td></td></tr> <tr><th>border-left-width</th><td></td><td></td></tr> <tr><th>border-right-width</th><td></td><td></td></tr> <tr><th>渲染模式</th><td colspan='2'></td></tr> <tr><th>top</th><td></td><td></td></tr> <tr><th>left</th><td></td><td></td></tr> <tr><th>offsetTop</th><td></td><td></td></tr> <tr><th>offsetLeft</th><td></td><td></td></tr> <tr><th>clientTop</th><td></td><td></td></tr> <tr><th>clientLeft</th><td></td><td></td></tr> <tr><th>offsetWidth</th><td></td><td></td></tr> <tr><th>clientWidth</th><td></td><td></td></tr> <tr><th>scrollWidth</th><td></td><td></td></tr> </tbody> </table> <button type="button" onclick="text()" >運(yùn)行代碼</button> 　 </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

在標(biāo)準(zhǔn)模式下，火狐等瀏覽器中我們看到offsetWidth等值最大為1007，因?yàn)榛鸷膐ffsetWidth不大于clientWidth，而clientWidth是不包含滾動(dòng)條（滾動(dòng)條的寬都固定為17px）。在IE中，offsetWidth是比clientWidth多了兩個(gè)border，由此發(fā)現(xiàn)問(wèn)題，1024-1003-17=4，4應(yīng)該是兩個(gè)auto生成，而這個(gè)auto應(yīng)該為border的值，這兩個(gè)border在IE中是固定死，不能通過(guò)以下手段修改。

復(fù)制代碼代碼如下:

 
<style type="text/css"> 
html{ 
border: 0; 
} 
</style> 

換言之，在標(biāo)準(zhǔn)模式下，IE的html是存在不可修改的寬為2px的border。也換言之，我的程序是有個(gè)BUG，沒(méi)有正確顯示出html的border為2px，囧。
再看怪癖模式，
火狐等沒(méi)有所謂的怪癖模式，直接看IE的。發(fā)現(xiàn)那神秘的2px又出現(xiàn)，這時(shí)出現(xiàn)在document.body的clientTop，clientLeft中。那么怪癖模式下的document.body的clientTop，clientLeft又相當(dāng)于CSS的什么概念呢？我們來(lái)看微軟給出的一幅老圖，那時(shí)IE5獨(dú)步天下，沒(méi)有所謂標(biāo)準(zhǔn)模式與怪癖模式之分，因此這幅圖的東西都是按怪癖模式表示的。

不難看出，clientLeft相當(dāng)于borderLeft，clientTop相當(dāng)于borderTop。至于上面的border-left-width與border-right-width，就不要看了，是錯(cuò)誤，因?yàn)槲耶?dāng)初就沒(méi)有考慮這兩個(gè)元素在標(biāo)準(zhǔn)模式與怪癖模式下的問(wèn)題。既然document.body的邊框區(qū)就達(dá)1024px了，那么html元素的臉往哪里擱呢？！對(duì)不起，在微軟早期的設(shè)想，body元素才是代表文檔（一個(gè)強(qiáng)有力的證據(jù)是，在怪癖模式下，網(wǎng)頁(yè)的滾動(dòng)條是位于body元素中）。模準(zhǔn)模式連同火狐那幫失敗者宣揚(yáng)的各種沒(méi)有市場(chǎng)份額的“標(biāo)準(zhǔn)”，都是在微軟極不情愿下支持的。你看，documentElement這樣累贅傻氣的名字像是微軟起的嗎？！如果是微軟，它應(yīng)該就叫html，和document.boy那樣簡(jiǎn)潔。搞到在標(biāo)準(zhǔn)模式下，我們?nèi)crollLeft，要用document.documentElement.scrollLeft，因?yàn)檫@時(shí)body不存在滾動(dòng)條；在怪癖模式下，要用document.body，雖然微軟以打補(bǔ)丁的方法添加上document.documentElement（真拗口，難怪網(wǎng)景會(huì)失敗），但滾動(dòng)條的位置不是說(shuō)變就變。
http://www.dbjr.com.cn/article/21719.htm