DIV常見任務(上) —常規任務(顯示捲軸/隱藏div/禁止事件冒泡等等)__div

轉載自：http://www.jb51.net/web/72339.html

作為最常用的布局元素，DIV在Web開發中起著至關重要的作用。這裡總結一下我在使用DIV中遇到的各種操作。 1.div顯示捲軸
這個是很常見的一個任務了，基本是通過CSS去實現捲軸。
(1)垂直捲軸
設定是否顯示捲軸主要是在CSS中設定下列的屬性：

複製代碼 代碼如下:
overflow：visible|auto|hidden|scroll
overflow-x：橫向捲軸
overflow-y：縱向捲軸

參數的意義：
visible:　不剪下內容也不添加捲軸。假如顯式聲明此預設值，對象將被剪下為包含對象的window或frame的大小。並且clip屬性設定將失效。
auto:　此為body對象和textarea的預設值。在需要時剪下內容並添加捲軸
hidden:　不顯示超過對象尺寸的內容
scroll:　總是顯示捲軸
overflow:auto;這個表示當你內容超過div高度出現垂直的捲軸
所以我們想在需要的時候顯示垂直的捲軸，可以這麼實現：

複製代碼 代碼如下:
<divstyle="overflow:auto;">...</div>

或者

複製代碼 代碼如下:
<divstyle="overflow-y:auto;">...</div>

(2)水平捲軸
如果只想出現水平的捲軸，一般還要配合禁止換行的設定，例如：

複製代碼 代碼如下:
<divstyle="overflow-x:auto;height:40px;width:100px;white-space:nowrap"></div>

(3)捲軸的外觀
在IE中，主要是使用各種顏色屬性：

複製代碼 代碼如下:
scrollbar-3dlight-color:color;設定或檢索捲軸亮邊框顏色；
scrollbar-highlight-color:color;設定或檢索捲軸3D介面的亮邊顏色；
scrollbar-face-color:color;設定或檢索捲軸3D表面的顏色；
scrollbar-arrow-color:color;設定或檢索捲軸方向箭頭的顏色；當捲軸出現但不可用時，此屬性失效；
scrollbar-shadow-color:color;設定或檢索捲軸3D介面的暗邊顏色；
scrollbar-darkshadow-color:color;設定或檢索捲軸暗邊框顏色；
scrollbar-base-color:color;設定或檢索捲軸基準顏色。其它介面顏色將據此自動調整。
scrollbar-track-color:color;設定或檢索捲軸的拖動地區顏色

在Chrome中，基本上是使用webkit專用屬性設定：

複製代碼 代碼如下:
::-webkit-scrollbar-track-piece{
background-color:#fff;/*捲軸的背景顏色*/
-webkit-border-radius:0;/*捲軸的圓角寬度*/
}
::-webkit-scrollbar{
width:8px;/*捲軸的寬度*/
height:8px;/*捲軸的高度*/
}
::-webkit-scrollbar-thumb:vertical{/*垂直捲軸的樣式*/
height:50px;
background-color:#999;
-webkit-border-radius:4px;
outline:2pxsolid#fff;
outline-offset:-2px;
border:2pxsolid#fff;
}
::-webkit-scrollbar-thumb:hover{/*捲軸的hover樣式*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*水平捲軸的樣式*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}

2.禁止div的事件冒泡
這個基本上都是使用標準的event.stopPropagation()方法阻止事件冒泡，當然IE除外：

複製代碼 代碼如下:
functionBigDiv(event){
if(event.stopPropagation){
event.stopPropagation();//在基於firefox核心的瀏覽器中支援做法stopPropagation
}else{
event.cancelBubble=true;//基於ie的寫法
}
//othercodes...
}

3.禁止div執行預設的行為
這個其實是一個普遍的問題，對於具有預設行為的元素，比如提交按鈕的提交表單行為,，<a>元素的超連結行為等，我們如果在這些元素上應用事件，同時也往往希望取消它們的預設行為，這個通過在事件的回呼函數中調用event.preventDefault();實現。
4.動態計算div的位置(比如常見的計算div彈出層的位置)
(1)DOM屬性方式
offsetTop：當前對象到其上級層頂部的距離。不能對其進行賦值，設定對象到父物件頂部的距離需要使用style.top屬性。
offsetLeft：當前對象到其上級層左邊的距離.。不能對其進行賦值，設定對象到父物件左邊的距離需要使用style.left屬性。
這裡要注意offsetTop與style.top的區別(offsetLeft與style.left也是一樣的道理)：
•offsetTop返回的是數字，而style.top返回的是字串，除了數字外還帶有單位：px，通常需要使用parseInt轉換成數值。
•offsetTop唯讀，而style.top可讀寫。
•如果沒有給HTML元素指定過top樣式，則style.top返回的是Null 字元串。
注意：在FireFox中，給style.top賦值的時候，也要是字串(帶px)這種形式。
(2)CSS中position屬性對位置的影響
position預設的屬性值都是static，靜態。但是position中最關鍵的屬性值是relative（相對）以及absolute（絕對）。
往往我們會把absolute屬性與left、top配合起來製作相關的“懸浮層”效果。然而有時候我們需要針對某一個容器的懸浮效果，而不是針對視窗的。這時候通過高度、寬度的計算不但麻煩，而且幾乎無法完美實現效果。其實只要把其上一級的樣式屬性position設定為relative就可以了。也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。例如如下A-B的嵌套結構

複製代碼 代碼如下:
<divid="A">
<divid="B">
</div>
</div>

當A的position為relative時，B的position為absolute才有效。這時候left:0、top:0就不再針對視窗文檔，而是針對id為A的這個div了。但是如果你在A中的padding="50px"，在A中的其他沒有設定postion為absolute的會隨著A的padding的值而變化，但是B不會變的它的position是相對上一級的。
這裡再稍微囉嗦一下position的四個屬性值：relative，absolute，fixed，static。還是以上面的代碼為例：
relative
relative值意味著元素要根據它本身的位置進行相對的位移。例如在上面的代碼中，如果設定B設定了relative值，比如設定如下CSS代碼：

複製代碼 代碼如下:
#B{
position:relative;
padding:5px;
top:5px;
left:5px;
}

我們可以這樣理解，如果不設定relative屬性，B的位置按照正常的文檔流，它應該處於某個位置。但當設定B的position為relative後，將根據top，right，bottom，left的值按照它理應所在的位置進行位移，relative的“相對的”意思也正體現於此。
注意：relative的位移是基於對象的margin的左上側的。
absolute
這個屬性總是有人給出誤導。說當position屬性設為absolute後，總是按照瀏覽器視窗來進行定位的，這其實是錯誤的。實際上，這是fixed屬性的特點。
當B的position設定為absolute後，其到底以誰為對象進行位移呢。這裡分為兩種情況：
•當B的父物件(或曾祖父，只要是父級對象)parent也設定了position屬性，且position的屬性值為absolute或者relative時，也就是說，不是預設值的情況，此時B按照這個parent來進行定位。
•當B不存在一個有著position屬性的父物件，那麼那就會以body為定位對象，按照瀏覽器的視窗進行定位，這個比較容易理解。
fixed
fixed是特殊的absolute，即fixed總是以body為定位對象的，按照瀏覽器的視窗進行定位。
static
position的預設值，一般不設定position屬性時，會按照正常的文檔流進行排列。
(3)Jquery方式
提示類彈出框是常見的一種方式，這個任務最重要的是計算彈出框的位置。通過事件對象擷取到事件來源,然後可以使用offset()Function Compute事件來源相對於document的位置：

複製代碼 代碼如下:
vartop=$(event.target).offset().top;
varleft=$(event.target).offset().left;

因為是相對於document，即頁面左上方的位置，所以需要將彈出層放在Body元素中的第一層，即父類就是body。如果包含在其他元素中，需要確定任何一個父類的position樣式設定為了relative。計算出來的top和left是事件來源的位置，在此位置顯示會將事件來源對象遮蓋住。所以通常需要手工做一些位移，比如top+20。
5.隱藏div元素
css中隱藏元素可以有兩種方式：display:none或者visibility:hidden。兩種方式的不同之處在於設定display的值後元素完全隱藏，元素所佔的位置也沒有了，下面的元素上移。設定visibility後元素所佔的位置還在，就是看不見。
6.div的子項目橫排，豎排
使用float屬性控制。div預設是豎排的，寬度是100%，CSS中設定float:left以後就變成橫排了。如果想從橫排中間斷開，後面的還原成豎排，則需要使用clear:both修改。看下面的例子：

複製代碼 代碼如下:
<div>
<divstyle="float:left">aaaaaaaaaaaaaa</div>
<divstyle="float:left">bbbbbbbbbbbbbb</div>
以上這兩個div就是橫向排列。
<divstyle="clear:both"></div>這個東西很重要，它清除上兩個層的浮動，也就是說以下的層就繼續垂直排列了。
<div>這個層就垂直排列了</div>
<div>這個層就垂直排列了</div>
</div>

上面只是float屬性的一個簡單應用。
float屬性主要是用於控制元素的流向，也就是向右靠攏，還是向左靠攏。這裡看一下float屬性的文法：

複製代碼 代碼如下:
float:none|left|right
none:預設值。對象不飄浮
left:文字資料流向對象的右邊
right:文字資料流向對象的左邊

為了達到某些效果，通常我們需要在某個時候取消浮動以免對別的對象造成影響，這是通過上面介紹過的那個clear屬性實現的：
clear屬性有四個值：

複製代碼 代碼如下:
clear:both|left|right|none;

簡單來說呢，clear屬性的作用就是“清除”浮動。如果某元素設定clear:left;表示該元素左邊不存在浮動元素；相應的，clear:right;表示該元素右邊不存在浮動元素；clear:both;表示該元素兩邊都不存浮動元素。clear:none表示兩邊允許有浮動元素。
7.設定div中文字的字型
先看一下CSS中控制文本的屬性列表：

複製代碼 代碼如下:
Word-spacing：定義了各個單詞之間的間距，取值：Normal|<length>。
Letter-spacing：定義了每個字母之間的間距，取值：Normal|<length>。
Text-decoration：定義文字的“裝飾”樣式，取值範圍：None|underline|overline|line-through|blink。
Vertical-align：定義了元素在垂直方向上的位置，取值：Baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>。
text-transform：使文本轉換為其它形式，取值：Capitalize|uppercase|lowercase|none。
Text-align：定義了文字的對齊，取值：Left|right|center|justify。
Text-indent：定義了文本的首行的縮排方式，取值：<length>|<percentage>。
Line-height：定義了文本的行高，取值：Normal|<number>|<length>|<percentage>。

我們可以從上面看到在這裡可以定義文本的文字間距、字母間距、裝飾、對齊、縮排方式和行高等屬性。舉個例子來看看吧：

複製代碼 代碼如下:
<pstyle="letter-spacing:5px;text-align:justify;text-indent:4em;line-height：17pt">我們看到經過文字屬性處理的文本字與字之間多了間距，行與行之間多了行高，對齊變成了左右對齊，並且段首又多縮排了兩格。</p>

letter-spacing設定了字間距為5px，其中5px為一個長度單位；text-align設定了對齊為左右對齊；indent設定了縮排格為4em；line-height設定了行高為17pt。從上面的例子，我們可以看出利用CSS的文字屬性可以方便的對頁面中的文本進行排版。
行間距取決於字型的大小，一般來說，小的字型大小需要大一點的行間距來便於閱讀，中文字型在網頁上如果沒有行間距的設定，對於閱讀大段文字來說是讀者的災難，所以適當設定line-height是非常必要的。一般地，line-height在網頁設計中應該是字型大小的1.5倍到2倍。Word和其它的文本編輯軟體裡，一般設定字型的120%作為預設的行間距。css裡的line-height設定，是均分後加在每一行的上下，也就是說，如果line-height設定為20px的話，那麼每一行文字的上下各有10px的間距。
8.設定div的tooltip分行顯示
在html種對於連結和圖片，我們可以通過添加title屬性以顯示一些解說文字，一般情況下，這些文字都是顯示成一行，那麼有沒有辦法讓它以多行的方式顯示呢。解決的方法有兩種：
(1).將title屬性分成幾行來寫，例如：

複製代碼 代碼如下:
<ahref=#"title="說明一
說明二
說明三">建站學</a>

(2).第一行相對來說不夠直觀，我們還可以在需換行的地方添加&#10;（&為半形)或&#13;來實現：

複製代碼 代碼如下:
<ahref=#"title="說明一&#10;說明二&#10;說明三">建站學</a>
<ahref=#"title="說明一&#13;說明二&#13;說明三">建站學</a>

9.滑鼠中鍵控制水平捲軸
在Chrome和FireFox中，一般都是滑鼠中鍵控制垂直捲軸，如果你的DIV只有水平控制條，預設情況下，滑鼠中鍵是不起滾動作用的，這個時候需要自己實現。
首先，掛接滑鼠滾輪事件：

複製代碼 代碼如下:
//MousewheeleventforNonFireFox
element.onmousewheel=fireElementScrolled;
//MousewheeleventforFireFox
element.addEventListener('DOMMouseScroll',fireElementScrolled,false);

這裡FireFox的特殊一點，需要使用addEventListener這種方式掛接。
然後，實現fireElementScrolled方法：

複製代碼 代碼如下:
fireElementScrolled=function(event){
varrolled=0;
if(event.wheelDelta){
rolled=event.wheelDelta;
}
else{
//Firefox:需要處理一下下
rolled=-event.detail*30;
}
varhtmlElement=document.getElementById('test');
htmlElement.scrollLeft=htmlElement.scrollLeft-rolled;
event.preventDefault();
returnfalse;
};

原理很簡單，就是拿到滾輪滾動的距離，處理後給div元素的scrollLeft屬性賦值即可。
10.子項目置中
(1)水平置中
普通的文字和圖片置中很好辦，設定父容器的CSS樣式包含text-align:center;即可。
當子項目是DIV等元素的情況稍微複雜一點，以子項目為div為例，如果只有一個子div，則可以通過設定子項目的CSS樣式包含margin:0auto;實現置中。例如下面的例子：

複製代碼 代碼如下:
<divid="a"style="width:400px;height:300px;border:1pxsolidgreen;">
　　<divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">簡單的一個子DIV置中問題</div>
</div>

如果含有多個子項目，我通常是多加一層div來實現，看例子：

複製代碼 代碼如下:
<divstyle="width:400px;height:300px;border:1pxsolidred;">
<divstyle="margin:0auto;position:relative;left:50%;float:left;">
<divstyle="position:relative;left:-50%;float:left">
<divstyle="border:1pxsolidblue;text-align:center;">1</div>
<divstyle="border:1pxsolidblue;text-align:center;">2</div>
<divstyle="border:1pxsolidblue;text-align:center;">3</div>
<divstyle="border:1pxsolidblue;float:left;">4</div>
<divstyle="border:1pxsolidblue;float:left;">5</div>
<divstyle="border:1pxsolidblue;float:left;">6</div>
</div>
</div>
</div>

(2)垂直置中
垂直置中麻煩一點，有一種做法很簡單，可以同時實現水平和垂直置中。首先給父元素寫上positon:relative，這麼做是為了給子項目打上position:absolute的時候不會被定位到外面去。接下去，寫上子項目的height和width，某些瀏覽器在解析的時候如果沒有這2個值的話會出現意想不到的錯位。接著就是整個方法的核心，給子項目再打上top:50%;left:50%以及margin-top:一半的height值的的負數;margin-left:一半的weight值的負數。當然，這裡父元素也要先寫上width和height。看例子：

複製代碼 代碼如下:
<divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">置中方法</div>