813 阿裏雲技術社區[雲棲]

Pro JavaScript Techniques第七章: JavaScript與CSS

　JavaScript和CSS的交互是現代JavaScript程序設計的支柱。事實上對於所有的現代web應用程序來說，至少使用某些形式的動態交互是必須的。那麼做過之後，用戶可以更快地操作而更少地把時間浪費在等待頁麵加載上。將動態技術與第六章提出的事件方麵的觀念相結合，對於實現無縫而強大的用戶體驗是非常重要的。
　　層疊式樣式表是用來對易用的、有吸引力的網頁進行修飾和布局的事實標準，它在給用戶提供最少的困難的同時為開發者提供最多的能力。當你將那一能力與JavaScript相結合時，你將能夠構造強健的用戶界麵，包括動畫、窗口部件(widgets)，或動態顯示等。

訪問樣式信息

　　JavaScript與CSS的結合全部是以表現作為結果的交互。理解什麼對你是可用的，對於精確地達到你想要的交互非常重要。
　　用來設置和獲取元素的CSS屬性的主要工具是其style屬性。比如說，如果想要取得一個元素的高度，你可以編寫如下代碼：elem.style.height。如果你想要設置元素的高度為某個特定值，你可以執行如下代碼：ele.style.height="100px"。
　　當處理DOM元素的CSS屬性時，有兩個會碰到的問題，它們並不像一般人所期望的那樣運作。首先，JavaScript要求你在設置任何空間尺度時指明單位(就像前麵設置高度時所做的那樣)。同時，任何空間屬性也將返回一個代表元素屬性的字符串而非數字(如"100px"而非100)。第二，如果一個元素高為100像素，而你試圖獲取它的當前高度，你期望從style屬性裏取得那個"100px"，情況卻未必會如你所願。這是因為任何樣式表文件或內聯CSS預設的樣式信息並不能可靠地反映到style屬性上。
　　這一狀況將我們引向JavaScript中處理CSS的一個重要函數：獲取一個元素真正的當前樣式屬性的方法，給你一個預期的精確值。存在一組(來源於W3C和IE特有的變種)相當可靠的方法可以用來得到DOM元素的真正的計算後的樣式屬性。它們能顧及所有相關的樣式表、元素特定屬性以及JavaScript所作的修改。當需要得到你正操作的元素的精確視圖信息時這些方法將會是極其有用的。
　　獲取元素的計算後樣式值時應該考慮到存在於不同的瀏覽器間的大量的差異。跟在大多數的情形一樣，IE有它自己的方法，而其它所有的瀏覽器都使用W3C定義的方式來實現。
　　程序7-1給出了一個用來找出元素的計算後樣式屬性值的一個函數，7-2則給出了使用此函數的一個示例。

　　程序7-1. 用來得到元素的計算後的實際CSS樣式值的一個函數

CODE:

//獲取一個特定元素(elem)的樣式屬性(name)
function getStyle( elem, name ) {
    //如果該屬性存在於style[]中，則它最近被設置過(且就是當前的)
    if (elem.style[name])
        return elem.style[name];
    //否則，嚐試IE的方式
    else if (elem.currentStyle)
        return elem.currentStyle[name];
    //或者W3C的方法，如果存在的話
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        //它使用傳統的"text-Align"風格的規則書寫方式，而不是"textAlign"
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        //獲取style對象並取得屬性的值(如果存在的話)
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    //否則，就是在使用其它的瀏覽器
    } else
    return null;
}

程序7-2.　元素的計算後的CSS樣式值未必是style對象裏可用值的一種情況

CODE:

<html>
<head>
    <style>p { height: 100px; }</style>
    <script>
    window.onload = function(){
        //找到欲檢查高度的段落對象
        var p = document.getElementsByTagName("p")[0];
        //使用傳統方式檢查其高度
        alert( p.style.height + " should be null" );

        //檢查計算後的高度值
        alert( getStyle( p, "height" ) + " should be 100px" );
    };
    </script>
</head>
<body>
    <p>I should be 100 pixels tall.</p>
</body>
</html>

　　程序7-2說明了怎樣得到一個DOM元素的實際的CSS屬性值。在這種情形裏你得到的是元素的實際的像素高度，即使其高度是通過頭部的CSS來設定的。應該注意的是，你的函數將會忽略度量的單位(比如使用的是百分比)。盡管這一解決方案並不是絕對安全的，它的確是一個良好的出發點。

動態的元素

　　動態元素的隱含的意思也就是使用JavaScript和CSS維護或創建的非靜態的元素。簡單的例子是指示你對時事通訊感興趣的複選框和彈出式的e-mail輸入域。
　　在最基本的層麵上，有三個關鍵的屬性可用來構造動態效果：位置、尺寸、可見性。使用這三個屬性你可以在現代瀏覽器上模擬大多數常見的用戶交互效果。

　　元素的位置

　　操作元素的位置是在頁麵中開發動態元素的一個重要構成部分。訪問和修改CSS位置屬性讓你有效地模擬許多流行的動畫和交互效果(比如拖放)。
　　知道CSS的定位係統是怎樣工作是操作元素位置的一個重要步驟。在CSS中，元素使用偏移來定位，使用的度量是相對父元素的左上角的偏移量。圖7-1是CSS中使用的坐標係統的一個例子。
[attach]37002[/attach]
　　圖7-1. 使用CSS的網頁裏坐標係統示例

　　頁麵上的所有元素都有著某種形式的top(垂直坐標)和left(水平坐標)偏移。大體來說，多數元素簡單地根據其周圍的元素靜態定位。依照CSS標準的提議，一個元素可以有幾種不同的定位方案。為了正好地理解這一點，我們來看看程序7-3所示的一個簡單的網頁。

　　程序7-3. 演示使用不同的定位方案的一個網頁

CODE:

<html>
<head>
<style>
p {
    border: 3px solid red;
    padding: 10px;
    width: 400px;
    background: #FFF;
}
p.odd {
    /* Positioning information goes in here */
    position: static;
    top: 0px;
    left: 0px;
}
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam …p>
    <p class='odd'>Phasellus dictum dignissim justo. Duis nec risus id nunc…p>
    <p>Sed vel leo. Nulla iaculis, tortor non laoreet dictum, turpis diam …</p>
</body>
</html>

　我們來看看在上麵這個簡單的HTML頁麵的情境裏，改變第二個段落的定位方式將會產後怎樣不同的布局：
　　靜態定位: 這是元素定位的默認方式；它簡單地遵從文檔的自然流向。當一個元素靜態定位時，top和left屬性將不起作用。靜態定位的一個例子見圖7-2，其中用於定位的css為：position:static;top:0px;left:0px。
[attach]37003[/attach]
　　圖7-2. 頁麵正常(static)布局流裏的段落

　　相對定位: 這一定位方式與靜態定位非常相似，因為元素仍然會遵循正常的文檔流直到得到其它指示。但是，設置top或left屬性將會導致元素相對它的原來的(靜態的)位置發生偏移。相對定位的一個例子如圖7-3所示，其中的CSS定位為position:relative;top:-50px;left:50px。
[attach]37004[/attach]
　　圖7-3. 相對定位，元素被移位到了前一個元素上麵，而不再遵循正常的文檔流

　　絕對定位: 將一個元素完全從正常的頁麵布局流中抓出來。被絕對定位的元素將相對於其第一個非靜態定位的父級元素來顯示。如果不存在父元素，它將相對於整個文檔被定位。絕對定位的一個例子見圖7-4，其中用於定位的css為：position:absolute;top:20px;left:0px。
[attach]37005[/attach]
　　圖7-4. 絕對定位，元素的位置與頁麵的左上角相關，顯示在已經存在的元素之上

　　固定定位: 固定定位將一個元素相對於瀏覽器的窗口定位。設置一個元素的top和left為0相素，將會使得該元素顯示在瀏覽器的左上角(隻要用戶還在那個頁麵上)，完全忽略瀏覽器滾動條的任何動作。固定定位的一個例子見圖7-5,其中用於定位的css為：position:fixed;top:20px;right:0px。
[attach]37006[/attach]
　　圖7-5. 固定定位，元素被定位到頁麵的右上角，盡管瀏覽器窗口被向下滾動了。

　　取得位置
　　元素被定位在何處依賴於它的css參數以及與其鄰接的內容而不同。訪問CSS屬性或計算後的實際值都沒有提供的一個能力是，獲取元素在頁麵中或者僅在其它元素中的確切位置。
　　首先，我們來看如何獲取元素在頁麵中的位置。你擁有幾個可支配的元素屬性可用來找到這一信息。所有的現代瀏覽器都支持以下三個屬性；當然它們各自是怎麼處理的，又是另外一回事了：
　　offsetParent: 理論上，這是元素在其中定位的父級元素。但是在實際情況下，offsetParent引用的元素取決於瀏覽器(比如說，在FireFox中，它引用根節點，而在Opera中，則是直接父元素。
　　offsetLeft和offsetTop: 這些參數是元素在其offsetParent上下文中的水平和垂直偏移。在現代瀏覽器上，它總是精確的。
　　現在，問題在於尋求一種可以跨瀏覽器工作的用來判定方式元素位置的一致的辦法。實現這一點的最一致的辦法如程序7-4所示：使用offsetParent屬性沿著DOM樹上行，一路累加偏移值。

　　程序7-4. 計算元素相對於文檔的x和y坐標的輔助函數

CODE:

//計算元素的X(水平，左)位置
function pageX(elem) {
    //檢查我們是否已經到了根元素
    return elem.offsetParent ?
        //如果我們還能往上，則將當前偏移與向上遞歸的值相加
        elem.offsetLeft + pageX( elem.offsetParent ) :
        //否則，取當前偏移
        elem.offsetLeft;
}
//計算元素的Y(垂直，頂)位置
function pageY(elem) {
    //檢查我們是否已經到了根元素
    return elem.offsetParent ?
        //如果我們還能往上，則將當前偏移與向上遞歸的值相加
        elem.offsetTop + pageY( elem.offsetParent ) :
        //否則，取當前偏移
        elem.offsetTop;
}

　　定位問題的另一部分是計算元素在其父元素中的偏移。需要注意的重要的一點是，簡單地使用元素的style.left或style.top屬性是不夠的，因為你可能想要找出沒有用Javascript或CSS定義樣式的元素的位置。
　　使用元素相對於其父元素的位置，你可以向DOM添加額外的相對該父元素定位的元素。比如，這個值用來建造上下文相關的工具提示是非常理想的。
　　為了找到元素相對於其父元素的位置，你必須再一次求助於offsetParent屬性。因為該屬性並不能保證返回特定元素的實際的父元素，你不得不使用你的pageX和pageY函數來找到父元素與子元素之間的位置差異。在程序7-5所示的兩個函數中，我試圖首先使用offsetParent，如果它是當前元素的實際的父元素；否則，我將繼續使用pageX和pageY方法沿DOM上行，以確定它的實際位置。

　　程序7-5. 用來確定元素相對於其父元素位置兩個函數

CODE:

//查找元素在其父元素中的垂直位置
function parentX(elem) {
    //如果offsetParent就是元素的parent，則提前返回
    return elem.parentNode == elem.offsetParent ?
        elem.offsetLeft :
        //否則，我們需要找出兩個元素相對整個頁麵的位置，計算差值
        pageX( elem ) - pageX( elem.parentNode );
}
//查找元素在其父元素中的垂直位置
function parentY(elem) {
    //如果offsetParent就是元素的parent，則提早返回
    return elem.parentNode == elem.offsetParent ?
        elem.offsetTop :
        //否則，我們需要找出兩個元素相對整個頁麵的位置，計算差值
        pageY( elem ) - pageY( elem.parentNode );
}

定位問題的最後一方麵是找出元素相對於其CSS容器的位置。如前麵所討論的，元素可能實際被包含在一個元素中而相對於另一個元素被定位(通過使用相對和絕對定位)。記住這一點，你可以回頭利用getStyle函數來得出計算後的CSS偏移值，因為那正是等效的定位。
　　有兩個可用的簡單的包裝函數可以處理這一點，如程序7-6所示。它們都隻是簡單調用getStyle函數，但同時也刪除任何多餘的(除非你不是使用基於像素的布局，它才是有用的)單位信息(比如說，100px將變成100)。

　　程序7-6. 找出元素的CSS定位的輔助函數

//得到元素的left位置
function posX(elem) {
    //取得計算後樣式並從中提取數字
    return parseInt( getStyle( elem, "left" ) );
}
//得到元素的top位置
function posY(elem) {
    //取得計算後的樣式並從中提取數字
    return parseInt( getStyle( elem, "top" ) );
}

設置元素位置
　　不同於取得元素的的位置，設置位置要少許多變數。但是聯合使用各種方式的布局(absolut,relative,fixed)時，你將能得到相當的、可用的結果。
　　目前，調整元素位置的唯一的辦法是通過修改它的CSS屬性。為了保持方法上的一致性，你應該僅修改left和top屬性，盡管存在著其它的屬性(如bottom和top)。作為開端，你可以輕鬆地創建一對函數，如程序7-7所示，用來設置一個元素的位置，而不考慮其當前位置。

　　程序7-7. 不考慮其當前位置，設置元素的x和y位置的一對函數

Pro JavaScript Techniques第七章: JavaScript與CSS

上一篇： Pro JavaScript Techniques第三章: 創建可重用的代碼

下一篇： 網絡廣告的計費方式,網站賺錢

相關內容

熱門內容

最新內容

下一篇：網絡廣告的計費方式,網站賺錢