javascript與CSS復(fù)習(xí)（《精通javascript》）

更新時(shí)間：2010年06月29日 01:36:36 作者：

js和css結(jié)合來產(chǎn)生醒目的交互效果，我們可以快速的訪問元素自身的樣式屬性

如：elem.style.height 或者 elem.style.height = '100px', 這里要注意的是設(shè)置任何幾何屬性必須明確尺寸單位（如px），同時(shí)任何幾何屬性返回的是表示樣式的字符串而非數(shù)值（如'100px'而非100）。另外像elem.style.height這樣的操作，也能獲取元素style屬性中設(shè)置的樣式值，如果你把樣式統(tǒng)一放在css文件中，上述方法只會返回一個(gè)空串。為了獲取元素真實(shí)、最終的樣式，書中給出了一個(gè)函數(shù)

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

 
//get a style property (name) of a specific element (elem) 
function getStyle(elem, name) { 
　　// if the property exists in style[], then it's been set 
　　//recently (and is current) 
if(elem.style[name]) return elem.style[name]; 
//otherwise, try to use IE's method 
else if (elem.currentStyle) return elem.currentStyle[name]; 
//Or the W3C's method, if it exists 
else if (document.defaultView && document.defaultView.getComputedStyle) { 
　　　　　　//it uses the traditional 'text-align' style of rule writing 
　　　　　　//instead of textAlign 
name = name.replace(/[A-Z]/g, '-$1'); 
name = name.toLowerCase(); 
//get the style object and get the value of the property ( if it exists) 
　　　　　　var s = document.defaultView.getComputedStyle(elem,''); 
return s && s.getPropertyValue(name); 
　　} else return null; 
} 

理解如何獲取元素的在頁面的位置是構(gòu)造交互效果的關(guān)鍵。先復(fù)習(xí)下css中position屬性值的特點(diǎn)。
static：靜態(tài)定位，這是元素定位的默認(rèn)方式，它簡單的遵循文檔流。但元素靜態(tài)定位時(shí)，top和left屬性無效。
relative：相對定位，元素會繼續(xù)遵循文檔流，除非受到其他指令的影響。top和left屬性的設(shè)置會引起元素相對于它的原始位置進(jìn)行偏移。
absolute：絕對定位，絕對定位的元素完全擺脫文檔流，它會相對于它的第一個(gè)非靜態(tài)定位的祖先元素而展示，如果沒有這樣的祖先元素，它的定位將相對于整個(gè)文檔。
fixed：固定定位把元素相對于瀏覽器窗口而定位。它完全忽略瀏覽器滾動條的拖動。
作者封裝了一個(gè)跨瀏覽器的獲取元素頁面位置的函數(shù)
其中有幾個(gè)重要元素的屬性：offsetParent，offsetLeft，offsetTop（可直接點(diǎn)擊到Mozilla Developer Center的相關(guān)頁面）

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

 
//find the x (horizontal, Left) position of an element 
function pageX(elem) { 
　　//see if we're at the root element, or not 
return elem.offsetParent ? 
//if we can still go up, add the current offset and recurse upwards 
　　　　　　elem.offsetLeft + pageX(elem.offsetParent) : 
　　　　　　//otherwise, just get the current offset 
　　　　　　elem.offsetLeft; 
} 
//find the y (vertical, top) position of an element 
function pageY(elem) { 
　　//see if we're at the root element, or not 
　　return elem.offsetParent ? 
//if we can still go up, add the current offset and recurse upwards 
　　 elem.offsetTop + pageY(elem.offsetParent) : 
//otherwise, just get the current offset 
elem.offsetTop; 
} 

我們接著要獲得元素相對于它父親的水平和垂直位置，使用元素相對于父親的位置，就可以為DOM增加額外的元素，并相對定位于它的父親。

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

 
//find the horizontal position of an element within its parent 
function parentX(elem) { 
　　//if the offsetParent is the element's parent, break early 
　　return elem.parentNode == elem.offsetParent ? 
elem.offsetLeft : 
// otherwise, we need to find the position relative to the entire 
// page for both elements, and find the difference 
pageX(elem) - pageX(elem.parentNode); 
} 
//find the vertical positioning of an element within its parent 
function parentY(elem) { 
　　//if the offsetParent is the element's parent, break early 
return elem.parentNode == elem.offsetParent ? 
　　　　elem.offsetTop : 
// otherwise, we need to find the position relative to the entire 
// page for both elements, and find the difference 
pageY(elem) - pageY(elem.parentNode); 
} 

元素位置的最后一個(gè)問題，獲取元素當(dāng)對于css定位（非static）容器的位置，有了getStyle這個(gè)問題很好解決

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

 
//find the left position of an element 
function posX(elem) { 
　　//get the computed style and get the number out of the value 
return parseInt(getStyle(elem, 'left')); 
} 
//find the top position of an element 
function posY(elem) { 
　　//get the computed style and get the number out of the value 
return parseInt(getStyle(elem, 'top')); 
} 

接著是設(shè)置元素的位置，這個(gè)很簡單。

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

 
//a function for setting the horizontal position of an element 
function setX(elem, pos) { 
　　//set the 'left' css property, using pixel units 
　　elem.style.left = pos + 'px'; 
} 
//a function for setting the vertical position of an element 
function setY(elem, pos) { 
　　//set the 'top' css property, using pixel units 
　　elem.style.top = pos + 'px'; 
} 

再來兩個(gè)函數(shù)，用于調(diào)準(zhǔn)元素的當(dāng)前位置，在動畫效果中很實(shí)用

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

 
//a function for adding a number of pixels to the horizontal 
//position of an element 
function addX(elem, pos) { 
　　//get the current horz. position and add the offset to it 
setX(elem, posX(elem) + pos); 
} 
//a function that can be used to add a number of pixels to the 
//vertical position of an element 
function addY(elem, pos) { 
　　//get the current vertical position and add the offset to it 
setY(elem, posY(elem) + pos); 
} 

知道如何獲取元素位置之后，我們再來看看如何獲取元素的尺寸，
獲取元素當(dāng)前的高度和寬度

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

 
function getHeight(elem) { 
　　return parseInt(getStyle(elem, 'height')); 
} 
function getWidth(elem) { 
　　return parseInt(getStyle(elem, 'width')); 
} 

大多數(shù)情況下，以上的方法夠用了，但是在一些動畫交互中會出現(xiàn)問題。比如以0像素開始的動畫，你需要事先知道元素究竟能有多高或多寬，其二當(dāng)元素的display屬性為none時(shí)，你會得不到值。這兩個(gè)問題都會在執(zhí)行動畫的時(shí)候發(fā)生。為此作者給出了獲得元素潛在高度和寬度的函數(shù)。

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

 
//查找元素完整的、可能的高度 
function fullHeight(elem) { 
　　//如果元素是顯示的，那么使用offsetHeight就能得到高度，如果沒有offsetHeight，則使用getHeight() 
　　if(getStyle(elem, 'display') != 'none') 
　　　　　　return elem.offsetHeight || getHeight(elem); 
//否則，我們必須處理display為none的元素，所以重置它的css屬性以獲得更精確的讀數(shù) 
var old = resetCSS(elem, { 
　　display:'', 
visibility:'hidden', 
position:'absolute' 
}); 
//使用clientHeigh找出元素的完整高度，如果還不生效，則使用getHeight函數(shù) 
var h = elem.clientHeight || getHeight(elem); 
//最后，恢復(fù)其css的原有屬性 
restoreCSS(elem, old); 
//并返回元素的完整高度 
return h; 
} 
//查找元素完整的、可能的寬度 
function fullWidth(elem) { 
　　//如果元素是顯示的，那么使用offsetWidth就能得到寬度，如果沒有offsetWidth,則使用getWidth() 
if(getStyle(elem, 'display') != 'none') 
　　　　return elem.offsetWidth || getWidth(elem); 
//否則，我們必須處理display為none的元素，所以重置它的css以獲取更精確的讀數(shù) 
var old = resetCSS(elem, { 
　　　display:'', 
visibility:'hidden', 
position:'absolute' 
}); 
//使用clientWidth找出元素的完整高度，如果還不生效，則使用getWidth函數(shù) 
var w = elem.clientWidth || getWidth(elem); 
//最后，恢復(fù)原有CSS 
　restoreCSS(elem, old); 
//返回元素的完整寬度 
return w; 
} 
//設(shè)置一組CSS屬性的函數(shù) 
function resetCSS(elem, prop) { 
　　var old = {}; 
//遍歷每個(gè)屬性 
for(var i in prop) { 
　　//記錄舊的屬性值 
old[i] = elem.style[i]; 
　　　　//設(shè)置新的值 
　　　　elem.style[i] = prop[i]; 
} 
return old; 
} 
//恢復(fù)原有CSS屬性 
function restoreCSS(elem, prop) { 
　　for(var i in prop) 
　　　　elem.style[i] = prop[i]; 
} 