精确获取样式属性(第2部分)
2009-09-08 00:00:00 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閻愵剙鍔ょ紓宥咃躬瀵鎮㈤崗灏栨嫽闁诲酣娼ф竟濠偽i鍓х<闁绘劦鍓欓崝銈囩磽瀹ュ拑韬€殿喖顭烽幃銏ゅ礂鐏忔牗瀚介梺璇查叄濞佳勭珶婵犲伣锝夘敊閸撗咃紲闂佺粯鍔﹂崜娆撳礉閵堝洨纾界€广儱鎷戦煬顒傗偓娈垮枛椤兘骞冮姀銈呯閻忓繑鐗楃€氫粙姊虹拠鏌ュ弰婵炰匠鍕彾濠电姴浼i敐澶樻晩闁告挆鍜冪床闂備胶绮崝锕傚礈濞嗘挸绀夐柕鍫濇川绾剧晫鈧箍鍎遍幏鎴︾叕椤掑倵鍋撳▓鍨灈妞ゎ厾鍏橀獮鍐閵堝懐顦ч柣蹇撶箲閻楁鈧矮绮欏铏规嫚閺屻儱寮板┑鐐板尃閸曨厾褰炬繝鐢靛Т娴硷綁鏁愭径妯绘櫓闂佸憡鎸嗛崪鍐簥闂傚倷鑳剁划顖炲礉閿曞倸绀堟繛鍡樻尭缁€澶愭煏閸繃宸濈痪鍓ф櫕閳ь剙绠嶉崕閬嶅箯閹达妇鍙曟い鎺戝€甸崑鎾斥枔閸喗鐏堝銈庡幘閸忔﹢鐛崘顔碱潊闁靛牆鎳愰ˇ褔鏌h箛鎾剁闁绘顨堥埀顒佺煯缁瑥顫忛搹瑙勫珰闁哄被鍎卞鏉库攽閻愭澘灏冮柛鏇ㄥ幘瑜扮偓绻濋悽闈浶㈠ù纭风秮閺佹劖寰勫Ο缁樻珦闂備礁鎲¢幐鍡涘椽閸愵亜绨ラ梻鍌氬€峰ù鍥敋閺嶎厼鍨傞幖娣妼缁€鍐煥濠靛棙顥滈柣锕備憾濮婂宕掑▎鎺戝帯濡炪們鍨归敃銈夊煝瀹ュ鍗抽柕蹇曞Х椤斿姊洪幖鐐插姶闁告挻鐟╅幃姗€骞庨懞銉у幐闂佸憡鍔戦崝搴㈡櫠閺囩姷纾奸柍褜鍓熷畷姗€鍩炴径鍝ョ泿闂傚⿴鍋勫ú銈吤归悜鍓垮洭鏁冮埀顒勬箒濠电姴锕ら悧蹇涙偩濞差亝鐓涢悘鐐额嚙婵″ジ鏌嶇憴鍕伌鐎规洖宕埢搴ょ疀閹惧妲楃紓鍌氬€搁崐鐑芥⒔瀹ュ绀夐幖杈剧到閸ㄦ繃銇勯弽顐粶濡楀懘姊洪崨濠冨闁搞劍澹嗙划濠氬箮閼恒儱鈧敻鏌ㄥ┑鍡欏嚬缂併劏妫勯湁闁绘ǹ宕甸悾鐑樻叏婵犲啯銇濇俊顐㈠暙閳藉鈻庨幇顓炩偓鐑芥⒑鐠囨彃顒㈤柣顓у櫍瀹曪繝骞庨懞銉ヤ粧濡炪倖娲嶉崑鎾垛偓瑙勬礀閻栧ジ銆佸Δ浣哥窞閻庯綆鍋呴悵顐⑩攽閻樻剚鍟忛柛锝庡灣瀵板﹪宕滆閸嬫挾绮☉妯绘悙缂佺姵鐓¢弻娑㈠Ψ椤旂厧顫╅梺钘夊暟閸犳牠寮婚敐澶婃闁圭ǹ瀛╅崰鎰版⒑閼姐倕鏋庣紓宥咃躬瀵鈽夐埗鈹惧亾閿曞倸绠f繝闈涙川娴滎亝淇婇悙顏勨偓銈夊礈濞嗘挻鍋嬮柛鈩冪▓閳ь剚妫冨畷姗€顢欓崲澹洤绠圭紒顔煎帨閸嬫捇鎳犻鈧崵顒傜磽閸屾艾鈧娆㈤敓鐘茬獥婵°倕鎳庣粻浼存煙闂傚鍔嶉柛瀣ф櫊閺岋綁骞嬮敐鍡╂缂佺虎鍘搁崑鎾绘⒒娴h櫣甯涢柛鏃€娲滅划鏃堟濞磋櫕鐩畷姗€顢欓崗鍏夹氶梻渚€鈧偛鑻晶顖炴煏閸パ冾伃妤犵偞甯¢獮瀣攽閹邦亞纾婚梺璇叉唉椤骞愭搴g焼濞撴埃鍋撻柛鈺冨仱楠炲鏁傞挊澶夋睏闂備礁婀辩划顖滄暜閳哄倸顕遍柍褜鍓涚槐鎾存媴閻熸澘濮㈤悷婊勫閸嬬喖宕氶幒鎴旀瀻闁规儳鐤囬幗鏇炩攽閻愭潙鐏﹂柣顓у枛閳讳粙顢旈崼鐔哄幍闁荤喐鐟ョ€氼剚鎱ㄩ崶銊d簻闁靛濡囩粻鐐存叏婵犲啯銇濋柡灞芥嚇閹瑩鎳犵捄渚純濠电姭鎷冮崒姘ギ闂佸搫鐬奸崰鏍箹瑜版帩鏁冮柨婵嗘噽閿涙捇姊绘担鐟邦嚋缂佽瀚板畷鎴濃槈閵忕姷鍘撮梺鐟邦嚟婵參宕戦幘缁樻櫜閹煎瓨锚娴滅偓銇勯幘瀵糕姇婵炲懎锕弻锛勪沪閻e睗锝嗙箾绾板彉閭鐐茬箳娴狅箓鎸婃径濠呭帿闂傚倸鍊烽悞锕傛儑瑜版帒纾归柡鍥ュ灩缁犵娀鏌熼柇锕€鏋熸い顐f礋閺岀喖骞嗚閹界姴鈹戦娑欏唉闁哄本鐩獮姗€寮堕幋鐘点偡闂備礁鎲¢幐绋跨暦椤掑嫧鈧棃宕橀鍢壯囨煕閳╁喚娈樺ù鐘虫倐濮婃椽鎳¢妶鍛瘣闂佸搫鎳忛惄顖炲箖妤e啯鍊婚柦妯猴級閵娧勫枑濠㈣埖鍔曠壕濠氭煙閸撗呭笡闁哄懏鐓¢獮鏍垝閻熸澘鈷夐梺璇茬箰缁夌懓顫忛搹鍦<婵☆垵顕ч棄宥呪攽閻愭彃绾ч柨鏇樺灪娣囧﹪鎮界粙璺槹濡炪倖鐗楀銊╂偪閳ь剟姊婚崒姘偓鎼佹偋婵犲嫮鐭欓柟閭﹀枦婵娊鏌ゅù瀣珖缁炬崘妫勯湁闁挎繂鐗婇ˉ澶愭煟閹炬潙濮堥柟渚垮妼铻g紒瀣仢椤鈹戦垾鍐茬骇闁告梹鐟╅悰顔嘉熼崗鐓庣彴闂佽偐鈷堥崜锕€危娴煎瓨鈷掑ù锝嚽归弳閬嶆煙绾板崬浜扮€规洘鍔栫换婵喰掔粙鎸庡枠鐎殿喛鍩栭幆鏃堝箻鐎涙ɑ婢戝┑锛勫亼閸婃牕顫忔繝姘ラ悗锝庝憾閸熷懘鏌曟径娑滅濞存粍绮嶉妵鍕箻鐠鸿桨绮跺┑鈩冨絻椤兘寮婚敐澶嬫櫜闁搞儜鍐ㄧ婵°倗濮烽崑鐐垫暜閿熺姷宓侀悗锝庡枛缁秹鏌嶈閸撶喖骞冨Δ浣虹瘈婵﹩鍘搁幏娲煟閻斿摜鎳冮悗姘煎弮瀹曟洖螖閸涱喚鍘卞┑鈽嗗灥閵嗏偓闁稿鎹囬幃銏ゅ箵閹烘垹闃€婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繘鏌i幋锝嗩棄闁哄绶氶弻娑樷槈濮楀牊鏁鹃梺鍛婄懃缁绘垿濡甸崟顖氱闁告鍋熸禒鑲╃磼閻愵剙鍔ゆい顓犲厴瀵鎮㈤悡搴n槶閻熸粌绻掗弫顔尖槈閵忥紕鍘撻梻浣哥仢椤戝懘鎮橀敃鍌涚厪闁搞儜鍐句純濡ょ姷鍋炵敮鈥崇暦閸楃儐娓婚柟顖嗗本顥$紓鍌氬€搁崐鎼佸磹妞嬪海鐭嗗〒姘e亾閽樻繈姊洪鈧粔鎾几娴g硶鏀介柣妯挎珪閻ㄦ垹鈧鎸风欢姘跺蓟濞戙垹鐒洪柛鎰典簴婵洭姊虹粙鍖″姛闁稿繑锕㈠璇测槈濡攱鏂€闂佺硶鍓濋〃蹇斿閳ь剚淇婇悙顏勨偓鏍ь潖瑜版帒绀夐柡鍥ュ灩閻撴﹢鏌熸潏楣冩闁稿﹤顭烽弻娑㈠Ψ閵忊剝鐝栭柡宥忕節濮婄粯鎷呴崨濠傛殘闂佸湱枪椤兘骞冮悜鑺ユ櫆闁伙絽澶囬弨铏節閻㈤潧孝婵炶绠撳畷鐢稿礃椤旂晫鍘撻梺鍛婄箓鐎氼剟寮抽悢鍏肩叆婵炴垶鐟ч惌鎺撴叏婵犲洨绱伴柕鍥ㄥ姍楠炴帡骞嬪⿰鍐╃€抽梻鍌欑閹诧繝鎮烽妷锔绘闁归棿绀侀悡婵嬫煙閻愵剚鐏遍柛顐邯閺屾盯顢曢妶鍛亖闂佸憡蓱閹倿寮婚敐鍫㈢杸闁哄洨鍋橀幋椋庣磼缂併垹骞栭柣鏍帶閻g兘骞嬮敃鈧粻濠氭偣閸ヮ亜鐨洪柣銈傚亾婵犵數鍋犻幓顏嗗緤娴犲绠熼柨鐔哄Т绾捐銇勯弽顐沪闁抽攱鍨归惀顏堫敇閻愭潙娅f繛瀛樼矊缂嶅﹪骞冪捄琛℃闁哄诞鍐ㄐ曢梻浣虹《閺備線宕戦幘鎰佹富闁靛牆妫楃粭鎺楁煕閻曚礁浜伴柟顖氬暙鐓ゆい蹇撴噽閸樺憡绻涙潏鍓у埌婵犫偓鏉堛劍娅犳い蹇撶墛閻撳啴鎮峰▎蹇擃仼闁诲繑鎸抽弻鐔碱敊閻e本鍣伴悗娈垮枛閻栧ジ鐛€n喗鍋愰弶鍫厛閺佸洭姊婚崒姘偓椋庣矆娴i潻鑰块弶鍫涘妿娴犳岸姊绘担渚敯濠殿喓鍊楅崚鎺撴償閵娿儳顦梺鍦劋椤ㄥ懐鐚惧澶嬬厱妞ゆ劑鍊曢弸搴∶归悩鐑橆仩缂佽鲸鎸婚幏鍛村礈閹绘帒澹嶆俊鐐€栧ú妯荤箾婵犲洤鏋侀柛鎰靛枛绾惧吋绻涢幋鐐跺妤犵偛鐗撳缁樻媴閸涘﹥鍎撳┑鐐茬湴閸ㄨ棄鐣峰┑鍡欐殕闁告洦鍓欓埀顒€鐖奸弻锝呂熼懖鈺佺闂佺粯鎸诲ú鐔煎蓟閻斿吋鍤嬫い鎺嗗亾濠碉紕鍘ч湁婵犲﹤瀚崝銈夋煃鐟欏嫬鐏撮柡浣哥Ч瀹曠喖顢曢埄鍐╃窔闂傚倷鑳舵灙闁挎洏鍎甸幃褔鎮╅懠顒佹濠电娀娼ч鍡涘疾濠靛鐓冪憸婊堝礈閻旂厧鐏抽柨鏇炲€搁柨銈嗕繆閵堝倸浜鹃梺缁樺笒閻忔岸濡甸崟顖氱鐎广儱鐗嗛崢锛勭磽娴e搫孝濠⒀傜矙閸┾偓妞ゆ巻鍋撻柛妯荤矒瀹曟垿骞橀弬銉︽杸闂佺粯枪娴滎剛绮i弮鍫熺厱閻庯綆鍋掑▓鏃堟煃鐟欏嫬鐏存い銏$懅濞戠敻鎮滈悾灞藉冀濠电姷鏁搁崑娑㈠箯閹寸姴绶ら柛顭戝暎閿濆绠涢柡澶庢硶椤斿﹪姊洪悷鏉挎毐缁剧虎鍙冨畷浼村箻鐠囪尙顔嗛梺缁樶缚缁垶宕甸幋锔界厾缂佸娉曟禒娑欐叏閿濆棗濮嶆慨濠傤煼瀹曟帒顫濋钘変壕闁绘垼濮ら崵鍕煠閸濄儲鏆╁ù鐘崇缁绘繈鎮介棃娑楃捕濡炪倖娲﹂崣鍐ㄧ暦濡も偓铻e〒姘煎灠濞堛劌顪冮妶鍡楀闁稿﹥鐗滈埀顒佺濮樸劑鍩€椤掑倹鍤€濠㈢懓锕畷浼村冀瑜夐弸鏃堟煏婵犲繐顩紒鈾€鍋撻梻浣圭湽閸ㄨ棄岣胯閻楀海绱撴担鍝勪壕婵犮垺岣跨划鏃堟偡闁箑娈ㄩ梺鍝勮閸庤京绮婚悽鍛婄厵闁绘垶岣跨粻姗€鏌涢悙鍨毈闁哄矉缍侀幃鈺呮倻濮楀棔鍝楅梺璇茬箰缁诲牓宕濆畝鍕垫晩闊洦绋戝敮閻熸粌顦靛畷鎴﹀箻閼搁潧鏋傞梺鍛婃处閸撴瑧鍠婂鍛斀闁宠棄妫楁禍婵堢磼鐠囨彃鈧潡鏁愰悙鍓佺杸婵炴垶鐟﹂崕顏堟⒑闂堚晛鐦滈柛姗€绠栭弫宥呪堪閸愶絾鏂€闂佸疇妫勫Λ妤呮倶閻樼粯鐓欑痪鏉垮船娴滀即鏌ㄥ┑鍫濅粶妞ゆ挸銈稿畷鍫曞煛閸愯法闂繝鐢靛仩閹活亞绱炴笟鈧棢闁规崘顕х粈澶屸偓骞垮劚椤︿即鎮″▎鎴犵<閻庯綆浜炴禒銏ゆ煛閸℃稐鎲鹃柡宀嬬秮閺佹劙宕惰楠炲螖閻橀潧浠滄い鎴濐樀瀵偊宕橀鑲╁姦濡炪倖甯掗崐缁樼▔瀹ュ應鏀介柣妯虹-椤f煡鏌涚€e墎绉柡灞剧洴婵$兘骞嬪┑鍡樻婵°倗濮村ú顓㈠箖濡ゅ啯鍠嗛柛鏇ㄥ墮绾板秶绱撴担鍓叉Ч闁瑰憡濞婇崹楣冨籍閸繄顦ㄥ銈嗘煥濡插牐顦归柡灞剧洴閸╁嫰宕楅悪鈧禍顏勎涢崟顐悑闁搞儮鏅濋敍婵囩箾鏉堝墽鍒板鐟帮躬瀹曟洟骞囬悧鍫㈠幈闂侀潧枪閸庨亶銆傚畷鍥╃<妞ゆ梻鈷堥崕蹇斻亜閹惧啿鎮戠€垫澘瀚埀顒婄秵娴滄牠宕戦幘缁樼叆閻庯絻鍔嬬花濠氭⒑閻熺増鎯堢紒澶婄埣钘濋柨鏃堟暜閸嬫挸鈻撻崹顔界亪闂佽绻戠换鍫ュ春閻愬搫绠i柨鏇楀亾闁绘搫绻濋弻娑㈠焺閸愮偓鐣兼繛瀵稿閸ㄨ泛顫忓ú顏勫窛濠电姴娴烽崝鍫曟⒑閸涘﹥澶勯柛娆忛鐓ら柛娑橈梗缁诲棝鏌曢崼婵堢闁告帊鍗抽弻娑㈡偆娴e摜浠搁悗瑙勬礃閸旀瑥鐣疯ぐ鎺濇晝闁挎繂鎳庢导搴㈢節绾版ɑ顫婇柛銊﹀▕瀹曘垼顦崇紒鍌氱У閵堬綁宕橀埡浣插亾閸偅鍙忔俊顖滃帶娴滈箖鎮楀鐐

继续上一部分,我们要看一下颜色。火狐好像不管三七二十一都会转变为rgb格式,不过我们通常比较习惯的是hex格式。这就用到以下两函数。
1.var rgb2hex = function(rgb) {
2. rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
3. return "#"+tohex(rgb[1])+tohex(rgb[2])+tohex(rgb[3])
4.}
5.var tohex = function(x) {
6. var hexDigits = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
7. return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
8.}
我们用正则表达式在检测其是否为rgb格式,是就用rgb2hex来转换它。但如果是red,green等值呢,火狐就一反常态,转换为hex格式,但IE依然如故。我们没有办法,自己做一个哈希,把常用的颜色都弄进去,然后一一匹对便是。
01.if(style.search(/background|color/) != -1) {
02. var color = {
03. aqua: '#0ff',
04. black: '#000',
05. blue: '#00f',
06. gray: '#808080',
07. purple: '#800080',
08. fuchsia: '#f0f',
09. green: '#008000',
10. lime: '#0f0',
11. maroon: '#800000',
12. navy: '#000080',
13. olive: '#808000',
14. orange:'#ffa500',
15. red: '#f00',
16. silver: '#c0c0c0',
17. teal: '#008080',
18. transparent:'rgba(0,0,0,0)',
19. white: '#fff',
20. yellow: '#ff0'
21. }
22. if(!!color[value]){
23. value = color[value]
24. }
25. if(value == "inherit"){
26. return getStyle(el.parentNode,style);
27. }
28. if(/^rgb((d+),s*(d+),s*(d+))$/.test(value)){
29. return rgb2hex(value)
30. }else if(/^#/.test(value)){
31. value = value.replace('#', '');
32. return "#" + (value.length == 3 ? value.replace(/^(w)(w)(w)$/, '$1$1$2$2$3$3') : value);
33. }
34. return value;
35.}
基本上是对于CSS的精确取值就是这样,显然它还存在许多不足之处,但对于布局用的和常用的样式都实现了。还提供了一个判断页面渲染模式的常数q,为了方便,方法名与JQuery同名(只能取值,不能赋值,以后有空慢慢与我的addSheet函数整合到一起)。
001.(function(){
002. var isQuirk = (document.documentMode) ? (document.documentMode==5) ? true : false : ((document.compatMode=="CSS1Compat") ? false : true);
003. var isElement = function(el) {
004. return !!(el && el.nodeType == 1);
005. }
006. var propCache = [];
007. var propFloat = !+"v1" ? 'styleFloat' : 'cssFloat';
008. var camelize = function(attr){
009. return attr.replace(/-(w)/g, function(all, letter){
010. return letter.toUpperCase();
011. });
012. }
013. var memorize = function(prop) { //意思为:check out form cache
014. return propCache[prop] || (propCache[prop] = prop == 'float' ? propFloat : camelize(prop));
015. }
016. var getIEOpacity = function(el){
017. var filter;
018. if(!!window.XDomainRequest){
019. filter = el.style.filter.match(/progid:DXImageTransform.Microsoft.Alpha(.?opacity=(.*).?)/i);
020. }else{
021. filter = el.style.filter.match(/alpha(opacity=(.*))/i);
022. }
023. if(filter){
024. var value = parseFloat(filter[1]);
025. if (!isNaN(value)) {
026. return value ? value / 100 : 0;
027. }
028. }
029. return 1;
030. }
031. var convertPixelValue = function(el, value){
032. var style = el.style,left = style.left,rsLeft = el.runtimeStyle.left;
033. el.runtimeStyle.left = el.currentStyle.left;
034. style.left = value || 0;
035. var px = style.pixelLeft;
036. style.left = left;//还原数据
037. el.runtimeStyle.left = rsLeft;//还原数据
038. return px + "px"
039. }
040. var rgb2hex = function(rgb) {
041. rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
042. return "#"+tohex(rgb[1])+tohex(rgb[2])+tohex(rgb[3])
043. }
044. var tohex = function(x) {
045. var hexDigits = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
046. return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
047. }
048. var getStyle = function (el, style){
049. var value;
050. if(!+"v1"){
051. //特殊处理IE的opacity
052. if(style == "opacity"){
053. return getIEOpacity(el)
054. }
055. value = el.currentStyle[memorize(style)];
056. //特殊处理IE的height与width
057. if (/^(height|width)$/.test(style)){
058. var values = (style == 'width') ? ['left', 'right'] : ['top', 'bottom'], size = 0;
059. if(isQuirk){
060. return el[camelize("offset-"+style)] + "px"
061. }else{
062. var client = parseFloat(el[camelize("client-"+style)]),
063. paddingA = parseFloat(getStyle(el, "padding-"+ values[0])),
064. paddingB = parseFloat(getStyle(el, "padding-"+ values[1]));
065. return (client - paddingA - paddingB)+"px";
066. }
067. }
068. }else{
069. if(style == "float"){
070. style = propFloat;
071. }
072. value = document.defaultView.getComputedStyle(el, null).getPropertyValue(style)
073. }
074. //下面部分全部用来转换上面得出的非精确值
075. if(!/^d+px$/.test(value)){
076. //转换可度量的值
077. if(/(em|pt|mm|cm|pc|in|ex|rem|vw|vh|vm|ch|gr)$/.test(value)){
078. return convertPixelValue(el,value);
079. }
080. //转换百分比,不包括字体
081. if(/%$/.test(value) && style != "font-size"){
082. return parseFloat(getStyle(el.parentNode,"width")) * parseFloat(value) /100 + "px"
083. }
084. //转换border的thin medium thick
085. if(/^(border).+(width)$/.test(style)){
086. var s = style.replace("width","style"),
087. b = {
088. thin:["1px","2px"],
089. medium:["3px","4px"],
090. thick:["5px","6px"]
091. };
092. if(value == "medium" && getStyle(el,s) == "none"){
093. return "0px";
094. }
095. return !!window.XDomainRequest ? b[value][0] : b[value][1];
096. }
097. //转换margin的auto
098. if(/^(margin).+/.test(style) && value == "auto"){
099. var father = el.parentNode;
100. if(/MSIE 6/.test(navigator.userAgent) && getStyle(father,"text-align") == "center"){
101. var fatherWidth = parseFloat(getStyle(father,"width")),
102. _temp = getStyle(father,"position");
103. father.runtimeStyle.postion = "relative";
104. var offsetWidth = el.offsetWidth;
105. father.runtimeStyle.postion = _temp;
106. return (fatherWidth - offsetWidth)/2 + "px";
107. }
108. return "0px";
109. }
110. //转换top|left|right|bottom的auto
111. if(/(top|left|right|bottom)/.test(style) && value == "auto"){
112. return el.getBoundingClientRect()[style];
113. }
114. //转换颜色
115. if(style.search(/background|color/) != -1) {
116. var color = {
117. aqua: '#0ff',
118. black: '#000',
119. blue: '#00f',
120. gray: '#808080',
121. purple: '#800080',
122. fuchsia: '#f0f',
123. green: '#008000',
124. lime: '#0f0',
125. maroon: '#800000',
126. navy: '#000080',
127. olive: '#808000',
128. orange:'#ffa500',
129. red: '#f00',
130. silver: '#c0c0c0',
131. teal: '#008080',
132. transparent:'rgba(0,0,0,0)',
133. white: '#fff',
134. yellow: '#ff0'
135. }
136. if(!!color[value]){
137. value = color[value]
138. }
139. if(value == "inherit"){
140. return getStyle(el.parentNode,style);
141. }
142. if(/^rgb((d+),s*(d+),s*(d+))$/.test(value)){
143. return rgb2hex(value)
144. }else if(/^#/.test(value)){
145. value = value.replace('#', '');
146. return "#" + (value.length == 3 ? value.replace(/^(w)(w)(w)$/, '$1$1$2$2$3$3') : value);
147. }
148. return value;
149. }
150. }
151. return value;//如 0px
152. }
153. var css = function(){
154. var a = arguments;
155. if(a.length == 1){
156. return getStyle(this,a[0])
157. }
158. }
159. var _ = function(el){
160. var el = isElement(el)? el :document.getElementById(el);
161. var gene = !el.constructor ? el : el.constructor.prototype;
162. gene.css = css;
163. gene.width = function(){
164. return getStyle(this,"width");
165. };
166. gene.height = function(){
167. return getStyle(this,"height");
168. };
169. return el
170. }
171. if(!window._){ //为了避免与JQuery的$发生冲突,我用_作为类库唯一的全局变量
172. window['_'] =_;
173. }
174. _.q = isQuirk;
175.})()
用法如下:
1.window.onload = function(){
2. alert(_("ccc").css("background-color"))
3. alert(_("aaa").css("width"))
4. alert(_(document.body).width())
5.};
我们可以用这个东西研究一下document.body与document.documentElement。
01.function text(){
02. var body = document.body,html = document.documentElement;
03. _("w1").innerHTML = _(body).width();
04. _("w2").innerHTML = _(html).width();
05. _("h1").innerHTML = _(body).height();
06. _("h2").innerHTML = _(html).height();
07. _("ml1").innerHTML = _(body).css("margin-left");
08. _("ml2").innerHTML = _(html).css("margin-left");
09. _("mr1").innerHTML = _(body).css("margin-right");
10. _("mr2").innerHTML = _(html).css("margin-right");
11. _("mt1").innerHTML = _(body).css("margin-top");
12. _("mt2").innerHTML = _(html).css("margin-top");
13. _("mb1").innerHTML = _(body).css("margin-bottom");
14. _("mb2").innerHTML = _(html).css("margin-bottom");
15. _("pl1").innerHTML = _(body).css("padding-left");
16. _("pl2").innerHTML = _(html).css("padding-left");
17. _("pr1").innerHTML = _(body).css("padding-right");
18. _("pr2").innerHTML = _(html).css("padding-right");
19. _("bl1").innerHTML = _(body).css("border-left-width");
20. _("bl2").innerHTML = _(html).css("border-left-width");
21. _("br1").innerHTML = _(body).css("border-right-width");
22. _("br2").innerHTML = _(html).css("border-right-width");
23. _("qqq").innerHTML = !_.q ? "标准模式" : "怪癖模式";
24. _("t1").innerHTML = _(body).css("top");
25. _("t2").innerHTML = _(html).css("top");
26. _("l1").innerHTML = _(body).css("left");
27. _("l2").innerHTML = _(html).css("left");
28. _("ot1").innerHTML = body.offsetTop;
29. _("ot2").innerHTML = html.offsetTop;
30. _("ol1").innerHTML = body.offsetLeft;
31. _("ol2").innerHTML = html.offsetLeft;
32. _("ct1").innerHTML = body.clientTop;
33. _("ct2").innerHTML = html.clientTop;
34. _("cl1").innerHTML = body.clientLeft;
35. _("cl2").innerHTML = html.clientLeft;
36. _("cw1").innerHTML = body.clientWidth;
37. _("cw2").innerHTML = html.clientWidth;
38. _("ow1").innerHTML = body.offsetWidth;
39. _("ow2").innerHTML = html.offsetWidth;
40. _("sw1").innerHTML = body.scrollWidth;
41. _("sw2").innerHTML = html.scrollWidth;
42.}
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
在标准模式下,火狐等浏览器中我们看到offsetWidth等值最大为1007,因为火狐的offsetWidth不大于clientWidth,而clientWidth是不包含滚动条(滚动条的宽都固定为17px)。在IE中,offsetWidth是比clientWidth多了两个border,由此发现问题,1024-1003-17=4,4应该是两个auto生成,而这个auto应该为border的值,这两个border在IE中是固定死,不能通过以下手段修改。
1.<style type="text/css">
2. html{
3. border: 0;
4. }
5.</style>
换言之,在标准模式下,IE的html是存在不可修改的宽为2px的border。也换言之,我的程序是有个BUG,没有正确显示出html的border为2px,囧。
再看怪癖模式,
测试属性 | document.body | document.documentElement |
width | ||
height | ||
margin-left | ||
margin-right | ||
margin-top | ||
margin-bottom | ||
padding-left | ||
padding-right | ||
border-left-width | ||
border-right-width | ||
渲染模式 | ||
top | ||
left | ||
offsetTop | ||
offsetLeft | ||
clientTop | ||
clientLeft | ||
offsetWidth | ||
clientWidth | ||
scrollWidth |
运行代码
火狐等没有所谓的怪癖模式,直接看IE的。发现那神秘的2px又出现,这时出现在document.body的clientTop,clientLeft中。那么怪癖模式下的document.body的clientTop,clientLeft又相当于CSS的什么概念呢?我们来看微软给出的一幅老图,那时IE5独步天下,没有所谓标准模式与怪癖模式之分,因此这幅图的东西都是按怪癖模式表示的。
图片看不清楚?请点击这里查看原图(大图)。
不难看出,clientLeft相当于borderLeft,clientTop相当于borderTop。至于上面的border-left-width与border-right-width,就不要看了,是错误,因为我当初就没有考虑这两个元素在标准模式与怪癖模式下的问题。既然document.body的边框区就达1024px了,那么html元素的脸往哪里搁呢?!对不起,在微软早期的设想,body元素才是代表文档(一个强有力的证据是,在怪癖模式下,网页的滚动条是位于body元素中)。模准模式连同火狐那帮失败者宣扬的各种没有市场份额的“标准”,都是在微软极不情愿下支持的。你看,documentElement这样累赘傻气的名字像是微软起的吗?!如果是微软,它应该就叫html,和document.boy那样简洁。搞到在标准模式下,我们取scrollLeft,要用document.documentElement.scrollLeft,因为这时body不存在滚动条;在怪癖模式下,要用document.body,虽然微软以打补丁的方法添加上document.documentElement(真拗口,难怪网景会失败),但滚动条的位置不是说变就变。
编缉推荐阅读以下文章
- 精确获取样式属性 (第一部分)
更多精彩
赞助商链接