javascript與CSS復習(《精通javascript》)
更新時間:2010年06月29日 01:36:36 作者:
js和css結合來產(chǎn)生醒目的交互效果,我們可以快速的訪問元素自身的樣式屬性
如:elem.style.height 或者 elem.style.height = '100px', 這里要注意的是設置任何幾何屬性必須明確尺寸單位(如px),同時任何幾何屬性返回的是表示樣式的字符串而非數(shù)值(如'100px'而非100)。另外像elem.style.height這樣的操作,也能獲取元素style屬性中設置的樣式值,如果你把樣式統(tǒng)一放在css文件中,上述方法只會返回一個空串。為了獲取元素真實、最終的樣式,書中給出了一個函數(shù)
//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:靜態(tài)定位,這是元素定位的默認方式,它簡單的遵循文檔流。但元素靜態(tài)定位時,top和left屬性無效。
relative:相對定位,元素會繼續(xù)遵循文檔流,除非受到其他指令的影響。top和left屬性的設置會引起元素相對于它的原始位置進行偏移。
absolute:絕對定位,絕對定位的元素完全擺脫文檔流,它會相對于它的第一個非靜態(tài)定位的祖先元素而展示,如果沒有這樣的祖先元素,它的定位將相對于整個文檔。
fixed:固定定位把元素相對于瀏覽器窗口而定位。它完全忽略瀏覽器滾動條的拖動。
作者封裝了一個跨瀏覽器的獲取元素頁面位置的函數(shù)
其中有幾個重要元素的屬性: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';
}
再來兩個函數(shù),用于調準元素的當前位置,在動畫效果中很實用
//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'));
}
大多數(shù)情況下,以上的方法夠用了,但是在一些動畫交互中會出現(xiàn)問題。比如以0像素開始的動畫,你需要事先知道元素究竟能有多高或多寬,其二當元素的display屬性為none時,你會得不到值。這兩個問題都會在執(zhí)行動畫的時候發(fā)生。為此作者給出了獲得元素潛在高度和寬度的函數(shù)。
//查找元素完整的、可能的高度
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);
//最后,恢復其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);
//最后,恢復原有CSS
restoreCSS(elem, old);
//返回元素的完整寬度
return w;
}
//設置一組CSS屬性的函數(shù)
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];
}
還有不少內容,明天繼續(xù),寫寫效率低下了,筆記本屏幕太小,開個pdf,寫著文章老來回切換,真是。。。是時候弄個雙顯了!
復制代碼 代碼如下:
//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:靜態(tài)定位,這是元素定位的默認方式,它簡單的遵循文檔流。但元素靜態(tài)定位時,top和left屬性無效。
relative:相對定位,元素會繼續(xù)遵循文檔流,除非受到其他指令的影響。top和left屬性的設置會引起元素相對于它的原始位置進行偏移。
absolute:絕對定位,絕對定位的元素完全擺脫文檔流,它會相對于它的第一個非靜態(tài)定位的祖先元素而展示,如果沒有這樣的祖先元素,它的定位將相對于整個文檔。
fixed:固定定位把元素相對于瀏覽器窗口而定位。它完全忽略瀏覽器滾動條的拖動。
作者封裝了一個跨瀏覽器的獲取元素頁面位置的函數(shù)
其中有幾個重要元素的屬性: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';
}
再來兩個函數(shù),用于調準元素的當前位置,在動畫效果中很實用
復制代碼 代碼如下:
//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'));
}
大多數(shù)情況下,以上的方法夠用了,但是在一些動畫交互中會出現(xiàn)問題。比如以0像素開始的動畫,你需要事先知道元素究竟能有多高或多寬,其二當元素的display屬性為none時,你會得不到值。這兩個問題都會在執(zhí)行動畫的時候發(fā)生。為此作者給出了獲得元素潛在高度和寬度的函數(shù)。
復制代碼 代碼如下:
//查找元素完整的、可能的高度
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);
//最后,恢復其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);
//最后,恢復原有CSS
restoreCSS(elem, old);
//返回元素的完整寬度
return w;
}
//設置一組CSS屬性的函數(shù)
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];
}
還有不少內容,明天繼續(xù),寫寫效率低下了,筆記本屏幕太小,開個pdf,寫著文章老來回切換,真是。。。是時候弄個雙顯了!
相關文章
js技巧之十幾行的代碼實現(xiàn)vue.watch代碼
相信很多的用vue的人都知道vue雙向綁定的原理建立在,給屬性綁定了getter和setter,在屬性被改變的同時觸發(fā)視圖的再渲染。而本期也是借助這兩個內置方法實現(xiàn)vue內的watch2018-06-06JavaScript判斷空值、NULL、undefined的方法對比
JavaScript五種原始類型(boolean、number、string、null、undefined)中的一種。在鑒別JavaScript原始類型的時候我們會用到typeof操作符。Typeof操作符可用于字符串、數(shù)字、布爾和未定義類型。2022-12-12JavaScript實現(xiàn)99乘法表及隔行變色實例代碼
最近做了個項目是要求實現(xiàn)99乘法表隔行變色,本文給大家分享通過多種方式實現(xiàn)js 99 乘法表,感興趣的朋友一起看看吧2016-02-02JavaScript 自動分號插入(JavaScript synat:auto semicolon insertion)
今天在看《Extjs中文手冊》的時候,寫了四五行樣例代碼,結果IE和Firefox一直報錯不通過。2009-11-11ES6中的Promise.all()和Promise.race()函數(shù)的實現(xiàn)方法
這篇文章主要介紹了ES6的Promise.all()和Promise.race()函數(shù),結合實例代碼介紹了ES6 Promise.race和Promise.all方法使用,通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-02-02