javascript與CSS複習（《精通javascript》）

如：elem.style.height 或者 elem.style.height = '100px', 這裡要注意的是設定任何幾何屬性必須明確尺寸單位（如px），同時任何幾何屬性返回的是表示樣式的字串而非數值（如'100px'而非100）。另外像elem.style.height這樣的操作，也能擷取元素style屬性中設定的樣式值，如果你把樣式統一放在css檔案中，上述方法只會返回一個空串。為了擷取元素真實、最終的樣式，書中給出了一個函數 複製代碼 代碼如下://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;
}

理解如何擷取元素的在頁面的位置是構造互動效果的關鍵。先複習下css中position屬性值的特點。
static：靜態定位，這是元素定位的預設，它簡單的遵循文檔流。但元素靜態定位時，top和left屬性無效。
relative：相對定位，元素會繼續遵循文檔流，除非受到其他指令的影響。top和left屬性的設定會引起元素相對於它的原始位置進行位移。
absolute：絕對位置，絕對位置的元素完全擺脫文檔流，它會相對於它的第一個非靜態定位的祖先元素而展示，如果沒有這樣的祖先元素，它的定位將相對於整個文檔。
fixed：固定定位把元素相對於瀏覽器視窗而定位。它完全忽略瀏覽器捲軸的拖動。
作者封裝了一個跨瀏覽器的擷取元素頁面位置的函數
其中有幾個重要元素的屬性：offsetParent，offsetLeft，offsetTop（可直接點擊到Mozilla Developer Center的相關頁面） 複製代碼 代碼如下://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增加額外的元素，並相對定位於它的父親。 複製代碼 代碼如下://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);
}

元素位置的最後一個問題，擷取元素當對於css定位（非static）容器的位置，有了getStyle這個問題很好解決 複製代碼 代碼如下://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'));
}

接著是設定元素的位置，這個很簡單。 複製代碼 代碼如下://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';
}

再來兩個函數，用於調準元素的當前位置，在動畫效果中很實用 複製代碼 代碼如下://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);
}

知道如何擷取元素位置之後，我們再來看看如何擷取元素的尺寸，
擷取元素當前的高度和寬度 複製代碼 代碼如下:function getHeight(elem) {
　　return parseInt(getStyle(elem, 'height'));
}
function getWidth(elem) {
　　return parseInt(getStyle(elem, 'width'));
}

大多數情況下，以上的方法夠用了，但是在一些動畫互動中會出現問題。比如以0像素開始的動畫，你需要事Crowdsourced Security Testing道元素究竟能有多高或多寬，其二當元素的display屬性為none時，你會得不到值。這兩個問題都會在執行動畫的時候發生。為此作者給出了獲得元素潛在高度和寬度的函數。 複製代碼 代碼如下://尋找元素完整的、可能的高度
function fullHeight(elem) {
　　//如果元素是顯示的，那麼使用offsetHeight就能得到高度，如果沒有offsetHeight，則使用getHeight()
　　if(getStyle(elem, 'display') != 'none')
　　　　　　return elem.offsetHeight || getHeight(elem);
//否則，我們必須處理display為none的元素，所以重設它的css屬性以獲得更精確的讀數
var old = resetCSS(elem, {
　　display:'',
visibility:'hidden',
position:'absolute'
});
//使用clientHeigh找出元素的完整高度，如果還不生效，則使用getHeight函數
var h = elem.clientHeight || getHeight(elem);
//最後，恢複其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以擷取更精確的讀數
var old = resetCSS(elem, {
　　　display:'',
visibility:'hidden',
position:'absolute'
});
//使用clientWidth找出元素的完整高度，如果還不生效，則使用getWidth函數
var w = elem.clientWidth || getWidth(elem);
//最後，恢複原有CSS
　restoreCSS(elem, old);
//返回元素的完整寬度
return w;
}
//設定一組CSS屬性的函數
function resetCSS(elem, prop) {
　　var old = {};
//遍曆每個屬性
for(var i in prop) {
　　//記錄舊的屬性值
old[i] = elem.style[i];
　　　　//設定新的值
　　　　elem.style[i] = prop[i];
}
return old;
}
//恢複原有CSS屬性
function restoreCSS(elem, prop) {
　　for(var i in prop)
　　　　elem.style[i] = prop[i];
}

還有不少內容，明天繼續，寫寫效率低下了，筆記本螢幕太小，開個pdf，寫著文章老來回切換，真是。。。是時候弄個雙顯了！