javascript 精確獲取樣式屬性（下）
更新時間：2010年01月02日 12:38:36 作者：
繼續(xù)上一部分，我們要看一下顏色。火狐好像不管三七二十一都會轉(zhuǎn)變?yōu)閞gb格式，不過我們通常比較習(xí)慣的是hex格式。這就用到以下兩函數(shù)。
復(fù)制代碼 代碼如下:
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];
}
我們用正則表達式在檢測其是否為rgb格式，是就用rgb2hex來轉(zhuǎn)換它。但如果是red，green等值呢，火狐就一反常態(tài)，轉(zhuǎn)換為hex格式，但IE依然如故。我們沒有辦法，自己做一個哈希，把常用的顏色都弄進去，然后一一匹對便是。
復(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;
}
基本上是對于CSS的精確取值就是這樣，顯然它還存在許多不足之處，但對于布局用的和常用的樣式都實現(xiàn)了。還提供了一個判斷頁面渲染模式的常數(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)
}
//下面部分全部用來轉(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ā)生沖突，我用_作為類庫唯一的全局變量
window['_'] =_;
}
_.q = isQuirk;
})()
用法如下：
復(fù)制代碼 代碼如下:
window.onload = function(){
alert(_("ccc").css("background-color"))
alert(_("aaa").css("width"))
alert(_(document.body).width())
};
我們可以用這個東西研究一下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;
}
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
在標(biāo)準(zhǔn)模式下，火狐等瀏覽器中我們看到offsetWidth等值最大為1007，因為火狐的offsetWidth不大于clientWidth，而clientWidth是不包含滾動條（滾動條的寬都固定為17px）。在IE中，offsetWidth是比clientWidth多了兩個border，由此發(fā)現(xiàn)問題，1024-1003-17=4，4應(yīng)該是兩個auto生成，而這個auto應(yīng)該為border的值，這兩個border在IE中是固定死，不能通過以下手段修改。
復(fù)制代碼 代碼如下:
<style type="text/css">
html{
border: 0;
}
</style>
換言之，在標(biāo)準(zhǔn)模式下，IE的html是存在不可修改的寬為2px的border。也換言之，我的程序是有個BUG，沒有正確顯示出html的border為2px，囧。
再看怪癖模式，
火狐等沒有所謂的怪癖模式，直接看IE的。發(fā)現(xiàn)那神秘的2px又出現(xiàn)，這時出現(xiàn)在document.body的clientTop，clientLeft中。那么怪癖模式下的document.body的clientTop，clientLeft又相當(dāng)于CSS的什么概念呢？我們來看微軟給出的一幅老圖，那時IE5獨步天下，沒有所謂標(biāo)準(zhǔn)模式與怪癖模式之分，因此這幅圖的東西都是按怪癖模式表示的。
不難看出，clientLeft相當(dāng)于borderLeft，clientTop相當(dāng)于borderTop。至于上面的border-left-width與border-right-width，就不要看了，是錯誤，因為我當(dāng)初就沒有考慮這兩個元素在標(biāo)準(zhǔn)模式與怪癖模式下的問題。既然document.body的邊框區(qū)就達1024px了，那么html元素的臉往哪里擱呢？！對不起，在微軟早期的設(shè)想，body元素才是代表文檔（一個強有力的證據(jù)是，在怪癖模式下，網(wǎng)頁的滾動條是位于body元素中）。模準(zhǔn)模式連同火狐那幫失敗者宣揚的各種沒有市場份額的“標(biāo)準(zhǔn)”，都是在微軟極不情愿下支持的。你看，documentElement這樣累贅傻氣的名字像是微軟起的嗎？！如果是微軟，它應(yīng)該就叫html，和document.boy那樣簡潔。搞到在標(biāo)準(zhǔn)模式下，我們?nèi)crollLeft，要用document.documentElement.scrollLeft，因為這時body不存在滾動條；在怪癖模式下，要用document.body，雖然微軟以打補丁的方法添加上document.documentElement（真拗口，難怪網(wǎng)景會失敗），但滾動條的位置不是說變就變。
http://www.dhdzp.com/article/21719.htm
相關(guān)文章
這篇文章主要介紹了微信小程序 搜索框組件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
說到 javascript 中的定時器，我們肯定會想到 setTimeout() 和 setInterval() 這兩個函數(shù)。本文將從 事件循環(huán)（Event Loop） 的角度來分析兩者的工作原理和區(qū)別2016-12-12
Flow之一個新的Javascript靜態(tài)類型檢查器
今天我們興奮的發(fā)布了 Flow 的嘗鮮版，一個新的Javascript靜態(tài)類型檢查器。Flow為Javascript添加了靜態(tài)類型檢查，以提高開發(fā)效率和代碼質(zhì)量，本文給大家分享Flow之一個新的Javascript靜態(tài)類型檢查器，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
Javascript實現(xiàn)帶關(guān)閉按鈕的網(wǎng)頁漂浮廣告代碼
帶有關(guān)閉功能的漂浮圖片的實現(xiàn)方法有很多，下面為大家介紹下使用Javascript是如何實現(xiàn)的，喜歡的額朋友可以了解下2014-01-01
在JS開發(fā)過程中,代碼可能存在一些語法或者邏輯上的錯誤,導(dǎo)致程序不能得到我們想要的結(jié)果,這時就需要我們找到并修復(fù)這些錯誤,我們將查找和修復(fù)錯誤的過程稱為調(diào)試或代碼調(diào)試,這篇文章主要給大家介紹了關(guān)于JS?debug跳過的7種方法,需要的朋友可以參考下2023-07-07
這篇文章為大家分享了javascript倒計時效果實現(xiàn)代碼段，現(xiàn)今團購網(wǎng)、電商網(wǎng)、門戶網(wǎng)等，常使用時間記錄重要的時刻，如時間顯示、倒計時差、限時搶購等，特別是雙十一活動，需要的朋友可以參考下2015-11-11
關(guān)于JavaScript中異步/等待的用法與理解
這篇文章主要給大家介紹了關(guān)于JavaScript中異步/等待的用法與理解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
xmlplus組件設(shè)計系列之路由（ViewStack)（7）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設(shè)計系列之路由，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
談及過年，最先讓人想到的就是，噼里啪啦的鞭炮聲。本文將利用JavaScript實現(xiàn)一個簡單的放鞭炮動畫效果，感興趣的小伙伴可以了解一下2023-01-01
Js生成隨機數(shù)/隨機字符串的方法小結(jié)【5種方法】
這篇文章主要介紹了Js生成隨機數(shù)/隨機字符串的方法,結(jié)合實例形式總結(jié)分析了5種Js生成隨機數(shù)/隨機字符串的操作技巧,需要的朋友可以參考下2020-05-05