不朽情缘网址有哪些

書名： JavaScript前端開發模塊化教程
作者名：趙建保
本章字數： 3211字
更新時間： 2019-12-20 19:23:35

3.3 核心知識

3.3.1 基于負邊距的垂直居中

James Anderson曾感嘆說：“44年前我們就把人類送上月球了，但現在我們仍然無法在CSS中實現垂直居中。”在CSS中對元素進行水平居中是非常簡單的：如果是行內元素，就對它的父元素應用text-align:center；如果是塊級元素，就對它自身應用margin:auto。然而，多年以來，垂直居中已經成為了CSS領域的圣杯，它同樣也是前端開發圈內廣為流傳的笑話。原因在于它同時具備以下幾條特征。① 極其常見、常用的需求。②從理論上來看，它似乎極其簡單。③在實踐中，當涉及尺寸不固定的元素時尤其復雜。為了解決這一難題，前端開發者們殫精竭慮，琢磨出了各種解決方法，大多數因通用性原因并不實用。其中利用表格布局法（利用表格的顯示模式dispaly:table）需要用到一些冗余的HTML元素，行內塊法充滿了hack的味道，為此不做討論。下面討論基于以下HTML代碼，直接插入<body>元素中。

<body> 
      <div>  
            <h1>垂直居中？</h1> 
            <p> 大神，你能幫我放垂直居中位置嗎？謝謝！</p> 
      </div> 
</body>

早期的垂直居中方法，它要求元素具有固定的寬度和高度，樣式代碼如下：

div { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin-top: -5em;   / * 10/2＝5* / 
  margin-left: -9em;   / * 18/2* =9* / 
  width: 18em; 
  height: 10em; 
  padding: 10px; 
  box-sizing: border-box; 
  background-color: #15e0fd; 
}

先把這個元素的左上角放置在視口（或最近的、具有定位屬性的祖先元素）的正中心，然后再利用負外邊距將它向左、向上移動（移動距離相當于它自身寬高的一半），從而把元素的正中心放置在視口的正中心。顯然，這個方法最大的局限在于，它要求元素的寬高是固定的。在通常情況下，對那些需要居中的元素來說，其尺寸往往是由其內容來決定的。如果找到一個屬性的百分比值以元素自身的寬高作為解析基準，那我們的難題就迎刃而解了！遺憾的是，對于絕大多數CSS屬性（包括margin）來說，百分比都是以其父元素的尺寸為基準進行解析的。

3.3.2 基于transform屬性的垂直居中

在知道元素的寬高的情況下，使用margin-left和margin-top取負值可以實現水平垂直居中對齊；在元素的寬高未知且瀏覽器支持transform樣式時，可以使用translate進行水平垂直居中，translate（）函數中的百分比是相對于自身寬高的百分比，百分比是以這個元素自身的寬度和高度為基準進行換算和移動的，而這正是我們所需要的。只要換用基于百分比的CSS變形來對元素進行偏移，就不需要在偏移量中把元素的尺寸寫死了。這樣我們就可以徹底解除對固定尺寸的依賴，代碼如下：

div { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%); 
  padding: 10px; 
  box-sizing: border-box; 
  background-color: #15e0fd; 
}

以上樣式代碼已經能夠居中了，完全滿足垂直居中需求。當然，沒有任何技巧是十全十美的，上面這個方法依賴于絕對定位，對瀏覽器支持transform屬性也有要求。

3.3.3 元素動畫制作

在CSS3中就是通過@keyframes屬性來實現過渡效果的精細控制，@keyframes語法規則是由@keyframes開頭，后面緊跟著“動畫的名稱”加上一對花括號“{…}”，括號中就是不同時間段樣式規則。一個@keyframes中的樣式規則是由多個百分比構成的，如0％～100％，可以在這個規則中創建更多個百分比，分別給每個百分比中需要有動畫效果的元素加上不同的屬性，從而讓元素達到一種不斷變化的效果，比如移動、顏色、位置、大小和形狀等。不過有一點需要注意，可以使用“from”和“to”代表一個動畫是從哪里開始，到哪里結束，也就是說from就相當于0％，而to相當于100％。值得一說的是，0％不能像別的屬性取值一樣把百分比符號省略，在這里必須加上百分比符號（％）。如果沒有加上，這個@keyframes就是無效的。因為@keyframes的單位只接受百分比值。keyframes可以指定任何順序排列來決定animation動畫變化的關鍵位置，具體用法如下。

#layer { 
  animation: layer3s; 
} 
@keyframes layer { 
  0% { 
    opacity: 0; 
  } 
 
  100% { 
    opacity: 1; 
  } 
}

3.3.4 警告對話框alert（）

瀏覽器通過alert（）、confirm（）和prompt（）方法可以調用系統對話框向用戶顯示消息。系統對話框與在瀏覽器中顯示的網頁沒有關系，也不包含HTML，外觀由操作系統或瀏覽器定義，而不是由CSS決定的。當對話框顯示時，代碼會停止執行，而關掉對話框后，代碼又會恢復執行。alert（）、confirm（）和prompt（）方法很適合向用戶顯示消息并請用戶做出決定。由于不涉及HTML和CSS或JavaScript，因此它是增強Web應用程序的一種便捷方式。另外，window.print（）方法和window.find（）方法提供了異步的打印和查找對話框。

調用alert（）方法接受一個字符串并將其顯示給用戶，其中包含指定的內容和一個“確定”按鈕，如圖3-2所示。通常警告框向用戶顯示無法控制的消息，例如錯誤消息，而用戶只能在看完消息后關閉對話框。

圖3-2 alert對話框

3.3.5 確認對話框confirm（）

confirm（）向用戶彈出提示性信息，不過該方法彈出的對話框中包含“確定”和“取消”兩個按鈕，提供了用戶對執行操作的選擇，如圖3-3所示。為了確定用戶是單擊了“確定”還是“取消”按鈕，可以檢查confirm（）方法返回的布爾值，true表示單擊了“確定”按鈕，false表示單擊了“取消”按鈕或者單擊了右上角的關閉按鈕 49916-00-67-1 。

圖3-3 confirm對話框

3.3.6 提示對話框prompt（）

prompt方法提示讓用戶輸入內容，如圖3-4所示。用戶輸入的結果以字符串的形式返回，如果用戶取消了對話框或沒有輸入任何響應，則返回null。例如：

result=prompt("請輸入delete 確認刪除操作！");

圖3-4 prompt對話框

3.3.7 BOM介紹

BOM（Browser Object Model，瀏覽器對象模型）主要用于管理瀏覽器窗口，提供了大量獨立的、可以與瀏覽器進行互動的功能，這些功能與任何網頁內容無關。BOM由多個對象組成，其中代表瀏覽器窗口的window對象是BOM的頂層對象，其他對象都是該對象的子對象。

3.3.8 window對象

window對象是BOM的核心，代表瀏覽器窗口的一個實例，客戶端JavaScript中的頂層對象，每當<body>或者<frameset>標簽出現時，window對象就會被自動創建。Web瀏覽器使用window對象來表示窗口或選項卡，如表3-1和表3-2所示。

表3-1 window對象屬性

表3-2 window對象方法

3.3.9 location對象

location是最有用的BOM對象之一，提供了與當前窗口中加載的文檔相關的信息，還提供了一個導航功能。事實上，location對象是很特別的對象，因為它既是window對象的屬性，也是document對象的屬性，即window.location和document.location引用的是同一組對象，如表3-3所示。

當一個Location對象被轉換成字符串，href屬性的值被返回。這意味著你可以使用表達式location來替代location.href。Location對象能控制瀏覽器顯示文檔的位置。如果把一個含有URL的字符串賦予Location對象或它的href屬性，瀏覽器就會把新的URL所指的文檔裝載進來，并顯示出來。Location提供了assign（）、reload（）、replace（）對象方法，如表3-4所示。

表3-3 Location對象屬性

表3-4 Location對象方法

使用location對象可以通過很多方式來改變瀏覽器的位置，將assign（）方法、location.href和window.location設置為一個URL值均可，其中location.href最常見，也會以該值調用assign（）方法，以下三行代碼功能相同：

window.find(); 
window.location.assign("http://www.baidu.com/"); 
window.location="http://www.baidu.com/";

通過修改location對象屬性可以改變當前加載的頁面，并在瀏覽器的歷史記錄中生成一條新記錄，用戶通過單擊后退按鈕會導航到前一個頁面。要禁用這種行為，可以使用replace（）方法。該方法唯一的參數是URL，執行后瀏覽器位置改變，但不會在歷史記錄中生成新記錄。

reload（）方法是重新加載當前顯示的頁面。如果調用reload（）時不傳遞任何參數，頁面就會以最有效的方式重新加載，如果頁面自上次請求以來并沒有改變過，則頁面就會從瀏覽器緩存中重新加載。如果要強制從服務器重新加載，則需要為該方法傳遞參數true。位于reload（）調用之后的代碼可能會也可能不會執行，這要取決于網絡延遲或系統資源等因素，最好將reload（）放在代碼的最后一行。

3.3.10 screen對象

screen對象用來表明客戶端的能力，包括瀏覽器窗口外部的顯示器的信息，如像素寬度和高度等。每個瀏覽器中的screen對象都包含著各不相同的屬性。JavaScript程序將利用這些信息來優化它們的輸出，以達到用戶的顯示要求。例如，一個程序可以根據顯示器的尺寸選擇使用大圖像還是使用小圖像。另外，JavaScript程序還能根據有關屏幕尺寸的信息將新的瀏覽器窗口定位在屏幕中間，具體的screen對象屬性如表3-5所示。

表3-5 screen對象屬性

3.3.11 history對象

history對象是window對象的一部分，可通過window.history屬性對其進行訪問。history對象包含用戶（在瀏覽器窗口中）訪問過的URL（歷史記錄）。目前還沒有應用于history對象的公開標準，不過所有瀏覽器都支持該對象。history對象的length屬性返回瀏覽器歷史列表中的URL數量。history對象方法如表3-6所示。

表3-6 history對象方法

history對象最初用來表示窗口的瀏覽歷史，但出于隱私方面的原因，history對象不再允許腳本訪問已經訪問過的實際URL。唯一保持使用的功能只有back（）、forward（）和go（）方法，go（）方法可以在用戶歷史記錄中任意跳轉，可以向后也可以向前，參數為正數時向前跳轉，為負數時向后跳轉。history.back（）執行的操作與單擊后退按鈕執行的操作一樣，history.go（-2）代碼執行的操作與單擊兩次后退按鈕執行的操作一樣。

官术网_书友最值得收藏!

JavaScript前端開發模塊化教程