一篇文章帶你了解CSS 文本樣式

家好，我是IT共享者，人稱(chēng)皮皮。這篇文章我們來(lái)講講CSS的文本樣式。

一、文本顏色Color

顏色屬性被用來(lái)設(shè)置文字的顏色。

顏色是通過(guò)CSS最經(jīng)常的指定：

十六進(jìn)制值 - 如"＃FF0000"。
一個(gè)RGB值 - "RGB（255,0,0）"。
顏色的名稱(chēng) - 如"紅"。

一個(gè)網(wǎng)頁(yè)的文本顏色是指在主體內(nèi)的選擇：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注：對(duì)于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。

二、屬性

1. text-align 文本的對(duì)齊方式

文本排列屬性是用來(lái)設(shè)置文本的水平對(duì)齊方式。

文本可居中或?qū)R到左或右,兩端對(duì)齊。

當(dāng)text-align設(shè)置為"justify"，每一行被展開(kāi)為寬度相等，左，右外邊距是對(duì)齊（如雜志和報(bào)紙）。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 號(hào)</p>
        <p class="main">　從前有個(gè)書(shū)生，和未婚妻約好在某年某月某日結(jié)婚。到那一天，未婚妻卻嫁給了別人。書(shū)生受此打擊， 一病不起。　　這時(shí)，路過(guò)一游方僧人，從懷里摸出一面鏡子叫書(shū)生看。書(shū)生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過(guò)一人， 看一眼，搖搖頭，走了。又路過(guò)一人，將衣服脫下，給女尸蓋上，走了。再路過(guò)一人，過(guò)去，挖個(gè)坑，小心翼翼把尸體掩埋了。　　僧人解釋道， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個(gè)路過(guò)的人，曾給過(guò)他一件衣服。她今生和你相戀，只為還你一個(gè)情。但是她最終要報(bào)答一生一世的人，是最后那個(gè)把她掩埋的人，那人就是他現(xiàn)在的丈夫。書(shū)生大悟，病愈。


        </p>
        <p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修飾

text-decoration 屬性用來(lái)設(shè)置或刪除文本的裝飾。

從設(shè)計(jì)的角度看 text-decoration屬性主要是用來(lái)刪除鏈接的下劃線：

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原來(lái)的樣子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下劃線</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以這樣裝飾文字：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注：不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常常混淆用戶(hù)。

3. text-transform文本轉(zhuǎn)換

text-transform文本轉(zhuǎn)換屬性是用來(lái)指定在一個(gè)文本中的大寫(xiě)和小寫(xiě)字母。

uppercase:轉(zhuǎn)換為全部大寫(xiě)。
lowercase：轉(zhuǎn)換為全部小寫(xiě)。
capitalize ：每個(gè)單詞的首字母大寫(xiě)。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本縮進(jìn)

text-indent文本縮進(jìn)屬性是用來(lái)指定文本的第一行的縮進(jìn)。

p {text-indent:50px;}

5. letter-spacing 設(shè)置字符間距

增加或減少字符之間的空間。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height設(shè)置行高

指定在一個(gè)段落中行之間的空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 設(shè)置字間距

增加一個(gè)段落中的單詞之間的空白空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 設(shè)置元垂直居中

設(shè)置文本的垂直對(duì)齊圖像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 設(shè)置文本陰影

設(shè)置文本陰影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、總結(jié)

本文主要介紹了CSS文本樣式實(shí)際應(yīng)用中應(yīng)該如何去操作，通過(guò)講解文本中對(duì)應(yīng)的屬性去改變文本的表現(xiàn)形式。使用豐富的效果圖的展示，能夠更直觀的看到運(yùn)行的效果，能夠更好的理解。使用Html語(yǔ)言，代碼結(jié)構(gòu)更佳的清晰，能夠幫助你更好的學(xué)習(xí)。

端如何用HTML5實(shí)現(xiàn)分片上傳GB級(jí)大文件，網(wǎng)頁(yè)中實(shí)現(xiàn)文件上傳下載的三種解決方案(推薦)，HTML5實(shí)現(xiàn)文件批量上傳組件，JQUERY 實(shí)現(xiàn)文件夾上傳(保留目錄結(jié)構(gòu))，B/S大文件上傳支持?jǐn)帱c(diǎn)上傳，WebService 大文件上傳,斷點(diǎn)續(xù)傳分片，HTML+AJAX實(shí)現(xiàn)上傳大文件問(wèn)題，用HTML實(shí)現(xiàn)本地文件的上傳，HTML5實(shí)現(xiàn)大文件上傳，HTML5實(shí)現(xiàn)大文件分片上傳思路，利用HTML5分片上傳超大文件思路，

WEBUPLOADER 支持超大上G,多附件上傳，JS 大文件分割/分片上傳，

百度WEBUPLOADER上傳視頻等大文件，WEBUPLOAD組件實(shí)現(xiàn)文件上傳功能和下載功能，JS大文件切片上傳，斷點(diǎn)續(xù)傳實(shí)現(xiàn)DEMO，前端上傳大文件的解決方案，前端上傳大文件處理（切片、斷點(diǎn)續(xù)傳），前端大文件上傳優(yōu)化方案——分片上傳，vue大文件上傳解決方案，vue大文件上傳解決方案10G，vue大文件上傳解決方案50G，vue大文件上傳解決方案100G，html5如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，

java如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringBoot如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringMVC如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，SpringCloud如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，

webuploader如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，百度webuploader如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，html5實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，vue如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，前端如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，JavaScript如何實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳、秒傳，

html5大文件斷點(diǎn)續(xù)傳、秒傳解決方案，html5大文件斷點(diǎn)續(xù)傳、加密上傳解決方案，html5大文件斷點(diǎn)續(xù)傳、加密存儲(chǔ)解決方案，html5大文件斷點(diǎn)續(xù)傳分片解決方案，html5大文件斷點(diǎn)續(xù)傳分塊解決方案，html5大文件斷點(diǎn)續(xù)傳分割解決方案，html5大文件斷點(diǎn)續(xù)傳切割解決方案，

客戶(hù)這邊實(shí)際上要傳的文件單個(gè)大小就有50G左右，所以需要支持?jǐn)帱c(diǎn)續(xù)傳和分片上傳，并且要支持多線程上傳，能夠充分利用帶寬資源。

之前在網(wǎng)上找過(guò)相關(guān)的資料，論壇里面也有網(wǎng)友交流過(guò)，還加過(guò)很多QQ群和微信群，但是結(jié)果都不太令人滿意。

技術(shù)選型的話用的是jquery，也是一個(gè)企業(yè)內(nèi)網(wǎng)系統(tǒng)，用的是之前公司的框架，只是進(jìn)行功能擴(kuò)展

分片網(wǎng)上討論的很多，基本上全部都是用的HTML5的API，這個(gè)方案也不是不能用，但是在IE下面就不行了，兼容性差了點(diǎn)，并且也不能進(jìn)行擴(kuò)展，不能進(jìn)行二次開(kāi)發(fā)，限制性非常大，我們技術(shù)同事提的要求是需要提供產(chǎn)品完整源代碼，

網(wǎng)上的文章全部都沒(méi)有提供文件夾上傳和續(xù)傳的代碼，也沒(méi)有提供數(shù)據(jù)庫(kù)操作的代碼，

另外這塊我們是要求必須提供產(chǎn)品完整源代碼，因?yàn)楹竺嫖覀冃枰砸褋?lái)維護(hù)，同時(shí)是要求能夠自主可控的

研發(fā)部門(mén)的同事調(diào)研過(guò)百度的webuploader這個(gè)組件，發(fā)現(xiàn)他實(shí)際上就是對(duì)Flash和HTML5進(jìn)行了一個(gè)封裝，本質(zhì)還是調(diào)的HTML5的API，之前在項(xiàng)目中也用過(guò)，嘗試過(guò)，但是最終都不太滿意，一個(gè)是兼容性非常差，說(shuō)的是兼容IE，但是在IE用的是Flash，在很多用戶(hù)的電腦上用不了，卡頓崩潰發(fā)生的太頻繁，文件上傳的數(shù)量一多比如幾千個(gè)，前端頁(yè)面就開(kāi)始卡了，用戶(hù)體驗(yàn)非常差。這些問(wèn)題研發(fā)部的同事都向百度反應(yīng)過(guò)，但是百度webuploader那邊一直沒(méi)人回，基本上沒(méi)人管，領(lǐng)導(dǎo)說(shuō)要求付費(fèi)提供技術(shù)支持，那邊也是沒(méi)人回，聯(lián)系不上他們?nèi)魏稳恕?/p>

webuploader這邊連個(gè)開(kāi)發(fā)人員都聯(lián)系不到，這個(gè)是怎么回事？

用戶(hù)上傳的文件比較大，有20G左右，直接用HTML傳的話容易失敗，服務(wù)器也容易出錯(cuò)，需要分片，分塊，分割上傳。也就是將一個(gè)大的文件分成若干個(gè)小文件塊來(lái)上傳，另外就是需要實(shí)現(xiàn)秒傳功能和防重復(fù)功能，秒傳就是用戶(hù)如果上傳過(guò)這個(gè)文件，那么直接在數(shù)據(jù)庫(kù)中查找記錄就行了，不用再上傳一次，節(jié)省時(shí)間，實(shí)現(xiàn)的思路是對(duì)文件做MD5計(jì)算，將MD5值保存到數(shù)據(jù)庫(kù)，算法可以用MD5，或者CRC，或者SHA1，這個(gè)隨便哪個(gè)算法都行。

切片的話還有一點(diǎn)就是在服務(wù)器上合并，一個(gè)文件的所有分片數(shù)據(jù)上傳完后需要在服務(wù)器端進(jìn)行合并操作。

視頻教程：https://www.ixigua.com/7226245960341389859

1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復(fù)制到項(xiàng)目中

示例中已經(jīng)包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對(duì)應(yīng)：文件初始化，文件數(shù)據(jù)上傳，文件進(jìn)度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動(dòng)測(cè)試

啟動(dòng)成功

效果

數(shù)據(jù)庫(kù)

源碼工程文檔：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源碼報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版報(bào)價(jià)單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

產(chǎn)品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
授權(quán)碼生成器：https://drive.weixin.qq.com/s?k=ACoAYgezAAwTIcFph1

內(nèi)容是《Web前端開(kāi)發(fā)之Javascript視頻》的課件，請(qǐng)配合大師哥《Javascript》視頻課程學(xué)習(xí)。

HTML5規(guī)范圍繞著如何使用新增標(biāo)記定義了大量Javascript API；其中一些API與DOM重疊，定義了瀏覽器應(yīng)該支持的DOM擴(kuò)展；

從HTML4開(kāi)始，在Web開(kāi)發(fā)領(lǐng)域，有一個(gè)非常大的應(yīng)用，就是濫用class屬性，一方面可以通過(guò)它為元素添加樣式，另一方面還可以用它表示元素的語(yǔ)義；于是，開(kāi)發(fā)人員會(huì)用大量的Javascript代碼來(lái)操作CSS類(lèi)，比如動(dòng)態(tài)修改類(lèi)或者搜索文檔中具有給定類(lèi)或給定的一組類(lèi)的元素，等等這些操作；為了讓開(kāi)發(fā)人員適應(yīng)并增加對(duì)class屬性的新的認(rèn)識(shí)，HTML5新增了很多API，致力于簡(jiǎn)化CSS類(lèi)的用法；

getElementsByClassName(names)方法：

該方法是基于元素class屬性值中的類(lèi)名來(lái)選取成組的文檔元素，可以通過(guò)document對(duì)象或Element元素調(diào)用這個(gè)方法；該方法最早出現(xiàn)在第三方Javascript類(lèi)庫(kù)中，是通過(guò)既有的DOM功能實(shí)現(xiàn)的，而現(xiàn)在，原生的實(shí)現(xiàn)具有極大的性能優(yōu)勢(shì)；

該方法接收一個(gè)names參數(shù)，即一個(gè)包含一個(gè)或多個(gè)類(lèi)名的字符串，多個(gè)類(lèi)名使用空格隔開(kāi)，返回帶有指定類(lèi)的所有元素的HTMLCollection；

var elts = document.getElementsByClassName("myclass");
console.log(elts);  // HTMLCollection
console.log(elts[0]);  // 第一個(gè)元素

傳入多個(gè)類(lèi)名時(shí)，類(lèi)名的先后順序不重要；如：

// 取得所有類(lèi)中同時(shí)包括username和current的元素，類(lèi)名的先后順序無(wú)所謂
var allCurrentUsernames = document.getElementsByClassName("username current");
console.log(allCurrentUsernames);
var selected = document.getElementById("mydiv").getElementsByClassName("selected");
console.log(selected);

它返回的HTMLCollection集合，可以借用Array的方法，如：

var elts = document.getElementsByClassName("selected");
var eltDivs = Array.prototype.filter.call(elts, function(ele){
    return ele.nodeName === 'DIV';
});
console.log(eltDivs);  // 返回?fù)碛衧elected類(lèi)名的所有div元素

使用這個(gè)方法可以更方便地為帶有某些類(lèi)的元素添加事件處理程序，從面不必再局限于使用ID或標(biāo)簽名；

<style>
.zr{background-color: rosybrown;}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    50%{transform: rotate(45deg);}
    100%{transform: rotate(0deg);}
}
.animating{
    animation: rotate 2s ease-in-out;
}
</style>
<p class="zr">this is ok</p>
<!-- 添加若干個(gè)class為zr的元素 -->
<script>
var elts = document.getElementsByClassName("zr");
for(var i=0,len=elts.length; i<len; i++){
    elts[i].addEventListener("click",function(e){
        this.classList.add("animating");
    },false);
    elts[i].addEventListener("animationend",function(e){
        this.classList.remove("animating");
        console.log("end");
    });
}
</script>

如此，我們就可以為某些需要執(zhí)行動(dòng)畫(huà)的元素添加一個(gè)名為zr的class類(lèi)即可；當(dāng)然，此處是一個(gè)動(dòng)畫(huà)效果，也可以是其他的某些操作；

getElementsByClassName()方法與querySelector()和querySelectorAll()方法很類(lèi)似，但用法及返回類(lèi)型不同；

var elts = document.getElementsByClassName("myclass outer");
console.log(elts);  // HTMLCollection
var elts = document.querySelectorAll(".myclass,.outer");
console.log(elts);  // NodeList

getElementsByClassName()參數(shù)只能是類(lèi)名，且多個(gè)類(lèi)名用空格隔開(kāi)，多個(gè)類(lèi)名是并的關(guān)系，而且不分順序，即只有所有class都匹配的元素才會(huì)被返回，其返回類(lèi)型是HTMLCollection，是動(dòng)態(tài)的集合；

querySelector()參數(shù)是CSS選擇器，并且可以使用復(fù)雜的CSS選擇器，只要是合法的CSS選擇器都可以，但多個(gè)選擇器必須使用逗號(hào)分隔，它們是或的關(guān)系，其返回類(lèi)型是NodeList，并且這個(gè)NodeList是靜態(tài)的；

目前，獲取元素集合共有四個(gè)方法，要注意它們的不同點(diǎn)；

var elts = document.getElementsByClassName("myclass outer");
console.log(elts);  // HTMLCollection
var elts = document.getElementsByTagName("div");
console.log(elts);  // HTMLCollection
var elts = document.getElementsByName("myname");
console.log(elts);  // NodeList
var elts = document.querySelectorAll(".myclass,.outer,.current");
console.log(elts);  // NodeList

另外，需要注意的是，getElementsByClassName()方法返回的是動(dòng)態(tài)HTMLCollection，所以使用這個(gè)方法與使用getElementsByTagName()以及其他返回動(dòng)態(tài)集合的DOM方法都具有同樣的性能問(wèn)題；

元素滾動(dòng)：

Element.scrollIntoView(alignToTop | scrollIntoViewOptions)方法：

DOM對(duì)滾動(dòng)頁(yè)面沒(méi)有做出規(guī)定；各瀏覽器分別實(shí)現(xiàn)了相應(yīng)的方法，用于以不同方式控制滾動(dòng)，最終HTML5選擇了scrollIntoView()作為標(biāo)準(zhǔn)方法；

該方法是作為Element類(lèi)型的擴(kuò)展存在的，因此可以在所有元素上使用，通過(guò)滾動(dòng)瀏覽器窗口或某個(gè)容器元素，使調(diào)用該方法的元素出現(xiàn)在視口中；

該方法接收一個(gè)布爾值參數(shù)alignToTop或Object型（scrollIntoViewOptions）參數(shù)，如果為true或者省略，那么窗口會(huì)盡可能滾動(dòng)到自身頂部與元素頂部平齊，如果為false，調(diào)用元素會(huì)盡可能全部出現(xiàn)在視口中，不過(guò)頂部不一定對(duì)齊；

var mybtn = document.getElementById("mybtn");
mybtn.onclick = function(){
    var img = document.getElementById("myimg");
    img.scrollIntoView(false);
}

Object型參數(shù)scrollIntoViewOptions：一個(gè)包含下列屬性的對(duì)象：

behavior：可選，定義動(dòng)畫(huà)過(guò)渡效果，"auto"或 "smooth" 之一，默認(rèn)為 "auto"；
block：可選，定義垂直方向的對(duì)齊，"start", "center", "end", "nearest"之一，默認(rèn)為 "start"；
inline：可選，定義水平方向的對(duì)齊，"start", "center", "end", "nearest"之一，默認(rèn)為 "nearest"；

img.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"});

但是IE與Edge對(duì)scrollIntoViewOptions這個(gè)參數(shù)并不友好，比如不支持behavior:”smooth”等；

var btn = document.getElementById("btn");
btn.onclick = function(){
    var img = document.querySelector("img");
    // 以下三行是等同的
    img.scrollIntoView();
    img.scrollIntoView(true);
    img.scrollIntoView({behavior:"auto",block:"start"});
    // 以下兩行是等同的，但I(xiàn)E與Edge似乎不識(shí)別end
    img.scrollIntoView(false);
    img.scrollIntoView({behavior:"auto",block:"end"});
}

另外，CSS3中有個(gè)平滑滾動(dòng)的屬性scroll-behavior，如；

<style>
        html,body{scroll-behavior: smooth;}
</style>

只要頁(yè)面有滾動(dòng)行為，自動(dòng)進(jìn)行平常處理；但I(xiàn)E與Edge不支持；

當(dāng)頁(yè)面發(fā)生變化時(shí)，一般會(huì)用這個(gè)方法來(lái)吸引用戶(hù)的注意力；實(shí)際上，為某個(gè)元素設(shè)置焦點(diǎn)也會(huì)導(dǎo)致瀏覽器滾動(dòng)并顯示出獲得焦點(diǎn)的元素；

var username = document.getElementById("username");
username.focus();

Element.scrollIntoViewIfNeeded()方法：

用來(lái)將不在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)的元素滾動(dòng)到瀏覽器窗口的可見(jiàn)區(qū)域，如果該元素已經(jīng)在瀏覽器窗口的可見(jiàn)區(qū)域內(nèi)，則不會(huì)發(fā)生滾動(dòng)，此方法是標(biāo)準(zhǔn)的Element.scrollIntoView()方法的專(zhuān)有變體，不屬于任何規(guī)范，是一種WebKit專(zhuān)有的方法；

var btn = document.getElementById("btn");
btn.onclick = function(){
    var elt = document.getElementById("elt");
    elt.scrollIntoViewIfNeeded(true);
}

目前，除了Chrome和Opera支持，其他都不支持；

應(yīng)用的場(chǎng)景：

對(duì)URL中hash標(biāo)記的進(jìn)化；比如：回到頂部(#)；

<a href="javascript：void(0)" id="topA" style="position:fixed;right:50px;bottom:50px;display:block; width:50px;height:50px;background-color:purple;">回到頂部</a>
<script>
// 回到頂部
var topA = document.getElementById("topA");
topA.onclick = function(){
    document.body.scrollIntoView({behavior:"smooth",block:"start"});
}
</script>

滾動(dòng)到指定位置(#xxx)；

如：一個(gè)單頁(yè)導(dǎo)航的應(yīng)用；

<style>
*{margin:0; padding: 0;}
html,body{
    -ms-overflow-style: none; scrollbar-width: none;
}
::-webkit-scrollbar{ display: none; }
ul,li{list-style-type: none;}
header{
    position: fixed; top:0; left: 0;;
    width: 100%; height: 2rem; background-color: rgba(0, 0, 0, .5);
}
nav ul li{padding: 0 2rem; line-height: 2rem; float: left;}
nav ul li a{color:#FFF; text-decoration: none;}
section{width: 100%; height: 100vh; box-sizing: border-box; padding: 10%; background-size:cover;}
section#banner{background: url(images/1.jpg) no-repeat center; background-size:cover;}
section#service{background:url(images/2.jpg) no-repeat center; background-size:cover;}
section#contact{background: url(images/3.jpg) no-repeat center; background-size:cover;}
footer{
    width:100%;height: 2rem; background-color: rgba(0, 0, 0, .8); color:rgba(255, 255, 255, .8);
    position: fixed; left: 0; bottom: 0;
}
</style>
<header>
    <nav>
        <ul>
            <li><a href="dom1.html">首頁(yè)</a></li>
            <li><a href="#news" data-name="news">新聞</a></li>
            <li><a href="#service" data-name="service">服務(wù)</a></li>
            <li><a href="#about" data-name="about">關(guān)于</a></li>
            <li><a href="#contact" data-name="contact">聯(lián)系</a></li>
        </ul>
    </nav>
</header>
<section id="banner">
    <h2>零點(diǎn)程序員</h2>
    <h3>zeronetwork</h3>
</section>
<section id="news"><h2>新聞中心</h2></section>
<section id="service"><h2>服務(wù)領(lǐng)域</h2></section>
<section id="about"><h2>關(guān)于我們</h2></section>
<section id="contact"><h2>聯(lián)系我們</h2></section>
<footer><p>北京零點(diǎn)網(wǎng)絡(luò)科技有限公司,www.zeronetwork.cn 零點(diǎn)程序員</p></footer>
<script>
window.onload = function(){
    scrollPage();
    var navs = document.querySelectorAll("nav a");
    for(var i=0,len=navs.length; i<len; i++){
        (function(){
            var item = navs[i];
            item.addEventListener("click",function(event){
                event.preventDefault();
                scrollPage(event.target.dataset.name);
            },false);
        })();
    }
}
function scrollPage(id){
    console.log(id);
    var section = id ? document.querySelector("#" + id) : document.body;
    section.scrollIntoView({behavior:"smooth",block:"start"});
}
</script>

聊天窗口滾動(dòng)顯示最新的消息；

<style>
*{margin: 0px; padding: 0;}
html,body{font-size: 14px;}
ul,li{list-style-type: none;}
li{margin: 1.5vh 0;}
#app{
    width: 400px; height: 400px; border: 10px solid purple;
    position: relative; background-color: rosybrown; 
    padding-bottom: 40px;
}
#message{ width: 100%; height:100%; padding:15px; padding-bottom: 0; 
    box-sizing: border-box; overflow-y: scroll;
}
#message ul{padding-bottom: 15px;}
#message ul li{display: flex;}
#message ul li.me{flex-direction: row-reverse;}
#message ul li a{display: inline-block;}
#message ul li a img{width: 2vw; height: 2vw; border-radius: 50%;}
#message ul li p{
    background-color: #FFF; border-radius: 3px; padding:0.5vw; margin:0 3vw 0 1vw;
}
#message ul li.me p{background-color:#09ce44;margin: 0 1vw 0 3vw;}
#inputdiv{
    position: absolute; left: 0; bottom: 0; width: 100%; height: 40px; 
    background-color:rgba(0, 0, 0, 1); padding: 5px; box-sizing: border-box;
    display:flex;
}
#txtInput{flex-grow: 3;}
#btn{flex-grow: 1;}
</style>
<div id="app">
    <div id="message">
        <ul>
            <li><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
            <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
            <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>..</p></li>
            <li><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
            <li class="me"><a href="#"><img src="images/1.jpg" /></a><p>...</p></li>
        </ul>
    </div>
    <div id="inputdiv"><input type="text" id="txtInput" name="txtInput" />
    <input type="button" value="發(fā)送" id="btn" /></div>
</div>
<script>
window.onload = function(){
    var ul = document.querySelector("#message>ul");
    if(navigator.userAgent.indexOf("Trident") != -1){
        ul.scrollIntoView(false);
    }else{
        ul.scrollIntoView({behavior:"smooth", block:"end"});
    }
    var btn = document.querySelector("#btn");
    btn.addEventListener("click",function(e){
        var txtInput = document.querySelector("#txtInput");
        if(txtInput.value){
            var html = "<li class=\"me\"><a href=\"#\"><img src=\"images/1.jpg\" /></a>";
            html += "<p>" + txtInput.value + "</p></li>";
            document.querySelector("#message ul").insertAdjacentHTML("beforeend", html);
            txtInput.value = "";
        }
        if(navigator.userAgent.indexOf("Trident") != -1){
            ul.scrollIntoView(false);
        }else{
            ul.scrollIntoView({behavior:"smooth", block:"end"});
        }
    },false);
}
</script>

焦點(diǎn)管理：

HTML5也添加了輔助管理DOM焦點(diǎn)的功能；

document.activeElement屬性：

該屬性始終會(huì)引用DOM中當(dāng)前獲得了焦點(diǎn)的元素；

元素獲得焦點(diǎn)的方式有頁(yè)面加載、用戶(hù)輸入和在代碼中調(diào)用focus()方法，如：

console.log(document.activeElement);
var btn = document.getElementById("myButton");
btn.focus();
console.log(document.activeElement === btn);  // true

默認(rèn)情況下，文檔剛剛加載完成時(shí)，document.activeElement中保存的是document.body元素的引用，文檔加載期間，其該屬性的值為null；

一般情況下，都是在一個(gè)表單控件上應(yīng)用焦點(diǎn)管理，比如，在一個(gè)input或textarea上選擇文本時(shí)，activeElement屬性就會(huì)返回該元素；

在現(xiàn)實(shí)中，該屬性在控件中使用時(shí)，一般會(huì)與選擇控件中的文本操作配合使用，比如，調(diào)用該控件的selectionStart()和selectionEnd()方法來(lái)獲取選擇的文本內(nèi)容；

<input type="text" id="myinput" value="北京零點(diǎn)網(wǎng)絡(luò)科技有限公司" /><br/>
<textarea id="mytextarea" rows="5" cols="40">北京零點(diǎn)網(wǎng)絡(luò)科技有限公司推出零點(diǎn)程序員品牌，專(zhuān)門(mén)從事IT培訓(xùn)，主講是大師哥王唯。</textarea>
<p>獲得焦點(diǎn)的元素：<b id="outputelement"></b></p>
<p>選擇的文本：<b id="outputtext"></b></p>
<script>
function selectText(e){
    var activeEl = document.activeElement;
    var selection = activeEl.value.substring(
        activeEl.selectionStart, activeEl.selectionEnd
    );
    var outputelement = document.getElementById("outputelement");
    var outputtext = document.getElementById("outputtext");
    outputelement.innerHTML = activeEl.id;
    outputtext.innerHTML = selection;
}
var myinput = document.getElementById("myinput");
var mytextarea = document.getElementById("mytextarea");
myinput.addEventListener("mouseup", selectText,false);
mytextarea.addEventListener("mouseup", selectText,false);
</script>

小示例：

// 獲取焦點(diǎn)的控件自動(dòng)滾到頁(yè)面中間
window.addEventListener("click",function(e){
    var elt = document.activeElement;
    if(elt.tagName == "INPUT" || elt.tagName == "TEXTAREA")
        elt.scrollIntoView({behavior:"smooth", inline:"center"});
},false);

解決由于窗口縮放、鍵盤(pán)彈出后遮擋表單的問(wèn)題：

<!-- 按tab切換到input，再縮放窗口大小 -->
<h1 tabindex="1">Web前端開(kāi)發(fā)</h1>
<div style="height: 1000px; background-color: purple;" id="mydiv" tabindex="2">div</div>
<input type="text" />
<script>
window.addEventListener("resize",function(e){
    if(document.activeElement.tagName === 'INPUT' ||
        document.activeElement.tagName === 'TEXTAREA'){
        setTimeout(function(){
            document.activeElement.scrollIntoView({behavior:"smooth"});
        },100);
    }
});
</script>

activeElement屬性是只讀的，如果想讓某個(gè)元素獲取焦點(diǎn)，可以調(diào)用該元素的focus()方法，如：

var myinput = document.getElementById("myinput");
document.activeElement = myinput;  // 失效
myinput.focus();
console.log(document.activeElement);  // input

document.hasFocus()方法：

該方法用于表明當(dāng)前文檔或者當(dāng)前文檔內(nèi)的節(jié)點(diǎn)是否獲得取焦點(diǎn)，該方法可以用來(lái)判斷當(dāng)前文檔中的活動(dòng)元素是否獲得了焦點(diǎn)，如：

console.log(document.hasFocus());

當(dāng)查看一個(gè)文檔時(shí)，當(dāng)前文檔中獲得焦點(diǎn)的元素一定是當(dāng)前文檔的活動(dòng)元素，但一個(gè)文檔中的活動(dòng)元素不一定獲得了焦點(diǎn)，例如，一個(gè)在后臺(tái)窗口中的活動(dòng)元素一定沒(méi)有獲得焦點(diǎn)；

通過(guò)檢測(cè)文檔是否獲得了焦點(diǎn)，可以知道用戶(hù)是不是正在與頁(yè)面交互；

<input id="btn" type="button" value="打開(kāi)窗口" /><br/>
<script>
function openWin(){
    window.open("about:blank","newwin","width=400,height=300");
}
var btn = document.getElementById("btn");
btn.addEventListener("click", openWin, false);
function checkPageFocus(){
    if(document.hasFocus())
        console.log("該頁(yè)面獲得了焦點(diǎn)");
    else
        console.log("該頁(yè)面失去了焦點(diǎn)");
}
setInterval(checkPageFocus, 1000);
</script>

查詢(xún)文檔獲知哪個(gè)元素獲得了焦點(diǎn)，以及確定文檔是否獲得了焦點(diǎn)，這兩個(gè)功能最重要的用途是提高Web應(yīng)用的無(wú)障礙性；無(wú)障礙Web應(yīng)用的一個(gè)主要標(biāo)志就是恰當(dāng)?shù)慕裹c(diǎn)管理，而確切地知道哪個(gè)元素獲得了焦點(diǎn)是一個(gè)比較重要的操作；

HTMLDocument的增強(qiáng)：

HTML5擴(kuò)展了HTMLDocument，增加了新的功能；

document.readyState屬性：

該屬性描述了document 的加載狀態(tài)，當(dāng)該屬性值發(fā)生變化時(shí)，會(huì)在 document 對(duì)象上觸發(fā) readystatechange事件；

IE4最早為document對(duì)象引入了readyState屬性，然后，其他瀏覽器也都陸續(xù)實(shí)現(xiàn)了這個(gè)屬性，最終HTML5把這個(gè)屬性納入了標(biāo)準(zhǔn)之中。

該屬性有三個(gè)可能的值：

loading：正在加載文檔；
interactive：可交互的，文檔已被解析，"正在加載"狀態(tài)結(jié)束，但是諸如圖像，樣式表和框架之類(lèi)的資源仍在加載；
complete：文檔和所有資源已完成加載，表示load狀態(tài)的事件即將被觸發(fā)；

console.log(document.readyState);  // loading

為什么要使用document.readyState屬性？目的就是通過(guò)它來(lái)實(shí)現(xiàn)一個(gè)指示文檔已經(jīng)加載完成的指示器；在這個(gè)屬性沒(méi)有得到廣泛支持前，要實(shí)現(xiàn)這樣的一個(gè)指示器，必須借助onload事件處理程序，表明文檔已經(jīng)加載完畢；

window.onload = function(){
    console.log("文檔加載完畢")
    console.log(document.readyState);  // complete
}
現(xiàn)在可以直接使用document.readyState屬性來(lái)判斷，如：
// 不會(huì)被執(zhí)行，因?yàn)榇a運(yùn)行到此處，readySate狀態(tài)為loading
if(document.readyState == "complete"){
    console.log("文檔已加載完畢");
    console.log(document.readyState);
}

但并沒(méi)有執(zhí)行，因?yàn)榇a執(zhí)行到此處，readyState的狀態(tài)為loading，而后它又不能自己更新，所以要實(shí)時(shí)的取得readyState的狀態(tài)；當(dāng)該屬性值發(fā)生變化時(shí)，會(huì)在 document 對(duì)象上觸發(fā) readystatechange事件，所以使用該事件就可以實(shí)時(shí)監(jiān)聽(tīng)它的狀態(tài)；

document.onreadystatechange = function(e) {
    // if(document.readyState == "loading"){
    //     console.log("Loading");
    // }else if(document.readyState == "interactive"){
    //     var span = document.createElement("span");
    //     span.textContent = "資源正在加載";
    //     document.body.appendChild(span);
    //     console.log("Interactive");
    // }else if(document.readyState == "complete"){
    //     var span = document.querySelector("span");
    //     document.body.removeChild(span);
    //     console.log("Complete");
    // }
    // 或者
    switch(document.readyState){
        case "loading":
            console.log("Loading");
            break;
        case "interactive":
            // 文檔已經(jīng)結(jié)束了“正在加載”狀態(tài)，DOM元素可以被訪問(wèn)。
            // 但是像圖像，樣式表和框架等資源依然還在加載。
            var span = document.createElement("span");
            span.textContent = "資源正在加載";
            document.body.appendChild(span);
            console.log("Interactive");
            break;
        case "complete":
            // 頁(yè)面所有內(nèi)容都已被完全加載
            var img = document.getElementsByTagName("img")[0];
            console.log("圖片等資源加載完成：" + img.src);
            break;
    }
}

一個(gè)簡(jiǎn)單小示例，loading頁(yè)

<style>
*{margin: 0; padding: 0;}
#loading{
    width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .6);
    position: absolute; top: 0; left: 0;
}
@keyframes rotate{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
#loading img{
    width: 5vw;
    position: absolute; left: 50%; top:50%;
    margin-left: -5vw; margin-top:-5vh;
    animation: rotate 1s linear infinite;  /* [??nf?n?t] */
}
#loading.loading-none{display: none;}
</style>
<div id="loading"><img src="images/loading.png" /></div>
<script>
document.onreadystatechange = function(e) {
    if(document.readyState == "complete")
        document.getElementById("loading").className = "loading-none";
    else
        document.getElementById("loading").className = ""
}
</script>

compatMode兼容模式：

頁(yè)面的渲染有兩種方式，Standards mode標(biāo)準(zhǔn)模式和Quirks mode混雜模式（也稱(chēng)為怪異模式）；

這兩種模式主要影響CSS內(nèi)容的呈現(xiàn)，某些情況下也會(huì)影響JavaScript的執(zhí)行；所以，在開(kāi)發(fā)時(shí)，確定瀏覽器處于何種模式很重要；

起先，是從IE6開(kāi)始區(qū)分渲染頁(yè)面的模式是Standards mode還是Quirks mode；IE為此給document對(duì)象添加一個(gè)名為compatMode屬性，該屬性即用于識(shí)別瀏覽器處于什么模式；如果是標(biāo)準(zhǔn)模式，返回CSS1Compat，反之返回BackCompat；后來(lái)，其他瀏覽器也實(shí)現(xiàn)了這個(gè)屬性，最終HTML5也把這個(gè)屬性納入標(biāo)準(zhǔn)；

console.log(document.compatMode);  // CSS1Compat

目前，存在以下幾種情況：

瀏覽器都是根據(jù)是否有DOCTYPE聲明判斷，有則為標(biāo)準(zhǔn)模式，值為CSS1Compact，無(wú)則為混雜模式，值為BackCompact；因此，一條好習(xí)慣就是每個(gè)html文檔都要有doctype聲明；

對(duì)于有DOCTYPE聲明，但瀏覽器不能正確識(shí)別，則使用混雜模式，值為BackCompact；

如果有xml聲明 <?xml version="1.0" encoding="utf-8"?>也是混雜模式；

另外，如果文檔的第一行是標(biāo)簽或文本，也為混雜模式；

對(duì)于IE來(lái)說(shuō)，這兩種模式差別很大，但對(duì)其他瀏覽器來(lái)說(shuō)，差別很小，因此，這兩種模式的判斷和差別主要是針對(duì)IE；

兩種模式的具體差別：

在Standards Mode下對(duì)于盒模型的解釋所有瀏覽器都是基本一致的，但在Quirks Mode模式下則有很大差別；

在Standards mode中：

元素真正的寬度 = margin + border-width + padding + width；

在Quirks mode中：

元素真正的寬度 = width，而其內(nèi)容寬度 = width - (margin – padding - border-width)；

在標(biāo)準(zhǔn)模式下，所有尺寸都必須包含單位，否則會(huì)被忽略，而在混雜模式下，可以不帶單位，如：style.width = "20"，相當(dāng)于"20px"；

當(dāng)一個(gè)div元素中包含的內(nèi)容只有圖片時(shí)，在標(biāo)準(zhǔn)模式下的所有瀏覽器中，在圖片底部都有4像素的空白；但在混雜模式下，div距圖片底部默認(rèn)沒(méi)有空白；

兩種模式獲取視口的方式是不同的；

console.log(document.body.clientHeight);
console.log(document.documentElement.clientHeight);

就是說(shuō)，在BackCompact模式下，取得document的某些屬性，如clientWidth、scrollLeft等，使用的是document.body，而標(biāo)準(zhǔn)模式下，使用的是document.documentElement，如：

var height = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
console.log(height);

documentMode文檔模式：

IE8為document對(duì)象添加了documentMode屬性，即文檔模式（document mode），該屬性與compatMode屬性緊密相關(guān)，但該屬性不是標(biāo)準(zhǔn)屬性，除了IE，其它瀏覽器都不支持；

console.log(document.documentMode);  // 11

頁(yè)面的文檔模式?jīng)Q定了可以使用什么功能，如，文檔模式?jīng)Q定了可以使用哪個(gè)級(jí)別的CSS，可以在Javascript中使用哪些API，以及如何對(duì)待文檔類(lèi)型；

在IE8中，有三種不同的呈現(xiàn)模式：

為5，則為混雜模式(IE5)，IE8或更高版本中的新功能無(wú)法使用；
為7，表示IE7仿真模式，IE8或更高版本中的新功能無(wú)法使用；
為8，表示IE8標(biāo)準(zhǔn)模式，IE8中的新功能都可以使用，如可以使用Selectors API，更多CSS2級(jí)選擇器和某些CSS3功能，還有一些HTML5的功能；不過(guò)IE9中的新功能無(wú)法使用；

從IE8往后，都遵循了這一規(guī)律，比如，為9，表示IE9標(biāo)準(zhǔn)模式，支持ES5，CSS3和更多HTML5的功能；

有了這個(gè)屬性，就能準(zhǔn)確的判斷IE的各種版本了，如：

var isIE = !!(window.ActiveXObject || "ActiveXObject" in window);
var ieMode = document.documentMode;
var isIE7 = isIE && ieMode && ieMode == 7;
var isIE8 = isIE && ieMode && ieMode == 8;
var isIE9 = isIE && ieMode && ieMode == 9;
var isIE10 = isIE && ieMode && ieMode == 10;
console.log(isIE);  // true
console.log(isIE10);  // 切換到10版本，返回true

X-UA-Compatible：

開(kāi)發(fā)者還可以主動(dòng)要求客戶(hù)端按照什么文檔模式進(jìn)行渲染，也就是強(qiáng)制瀏覽器以某種模式渲染頁(yè)面，此時(shí)可以使用HTTP頭部信息X-UA-Compatible，或通過(guò)等價(jià)的<meta>標(biāo)簽來(lái)設(shè)置：

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

IEVersion有可能有以下值：

Edge：始終以最新的文檔模式來(lái)渲染頁(yè)面；忽略文檔類(lèi)型聲明；
EmulateIE9(8、7)：如果有文檔聲明，則以IE9(8、7)標(biāo)準(zhǔn)模式渲染頁(yè)面，否則將文檔模式設(shè)置為IE5；
9、8、7、5：強(qiáng)制以IE9(8、7、IE5模式)標(biāo)準(zhǔn)模式渲染頁(yè)面，忽略文檔類(lèi)型聲明；

如：讓文檔模式像在IE7中一樣，可以：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

如果不考慮文檔類(lèi)型聲明，而直接使用IE8標(biāo)準(zhǔn)模式，可以：

<meta http-equiv="X-UA-Compatible" content="IE=8">

再如，強(qiáng)制以IE5混雜模式渲染：

<meta http-equiv="X-UA-Compatible" content="IE=5" />

如果在IE8以下的瀏覽器中設(shè)置，是無(wú)效的，因?yàn)樵撛O(shè)置是在IE8才開(kāi)始有的；

使用最新的文檔模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

IE瀏覽器將總是使用最新版本的文檔模式；

另外，也可以同時(shí)設(shè)置多個(gè)值，中間用逗號(hào)隔開(kāi)；

<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">

注意，由右向左進(jìn)行嘗試，即先使用IE8模式，如果失敗，則使用IE模式；

最流行的設(shè)置：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

chrome=1表示可以激活Chrome Frame；

如果安裝了Google Chrome Frame（谷歌瀏覽器內(nèi)嵌框架）則使用谷歌瀏覽器內(nèi)核模式，甚至?xí)褂肅hrome的控制臺(tái)，否則使用最新的IE模式；

head屬性：

在HTML5規(guī)范中新增了document.head屬性，引用文檔的<head>元素，屬于HTMLHeadElement類(lèi)型；

console.log(document.head);
console.log(document.head === document.querySelector("head"));

各主流瀏覽器均支持，但為了兼容低版本的，也可以結(jié)合備用方式，如：

var head = document.head || document.getElementsByTagName("head")[0];

如果有多個(gè)<head>元素，則返回第一個(gè)；

document.head 是個(gè)只讀屬性，為該屬性賦值只會(huì)靜默失敗，如果在嚴(yán)格模式中，則會(huì)拋出TypeError異常；

字符集屬性：

HTML5新增了幾個(gè)與文檔字符集有關(guān)的屬性，其中，charset屬性表示實(shí)際使用的字符集，也可以用來(lái)指定新字符集；可以通過(guò)<meta>元素、響應(yīng)頭部或直接設(shè)置charset屬性修改這個(gè)值，但實(shí)際上是只讀的，現(xiàn)在已經(jīng)被characterSet替代，該屬性是只讀屬性，返回當(dāng)前文檔的字符編碼，該字符編碼是用于渲染此文檔的字符集，如：

console.log(document.charset);  // UTF-8

此時(shí)，可以修改文檔的字符集設(shè)置，如：

// IE與老版的Edge返回gb2312，其它默認(rèn)失敗
document.charset = "gbk";
console.log(document.charset);  // UTF-8
console.log(document.characterSet);
// 同上，但所有瀏覽器靜默失敗
document.characterSet = "gbk";
console.log(document.characterSet);

另一個(gè)屬性是defaultCharset，表示根據(jù)默認(rèn)瀏覽器及操作系統(tǒng)的設(shè)置，當(dāng)前文檔默認(rèn)的字符集應(yīng)該是什么，該屬性不是標(biāo)準(zhǔn)屬性，沒(méi)什么用處；

console.log(document.defaultCharset);  // 只有IE與Safari有值

data-自定義數(shù)據(jù)屬性：

HTML5定義了一種標(biāo)準(zhǔn)的、附加額外數(shù)據(jù)的方法，即在HTML5文檔中，任意以”data-”為前綴的小寫(xiě)的屬性名稱(chēng)都是合法的，這樣的屬性被稱(chēng)為數(shù)據(jù)集屬性，目的是為元素提供與渲染無(wú)關(guān)的信息，或者提供語(yǔ)義信息；這些屬性可以任意添加、隨便命名，只要以data-開(kāi)頭即可，如：

<div id="mydiv" data-appId="1234" data-myname="wangwei"></div>

HTMLElement.dataset屬性：

在Javascript中也為Element對(duì)象上定義了dataset屬性，該屬性指代一個(gè)對(duì)象，是元素的data-特性的實(shí)時(shí)、雙向的接口；

dataset屬性的值是DOMStringMap接口的一個(gè)實(shí)例，被用于容納和展示元素的自定義屬(特)性，它就是一個(gè)名值對(duì)的映射，在這個(gè)映射中，每個(gè)data-name形式的屬性都會(huì)有一個(gè)對(duì)應(yīng)的屬(特)性，只不過(guò)屬性名沒(méi)有data-前綴，比如，dataset.x保存的就是data-x屬(特)性的值；帶連字符的屬(特)性對(duì)應(yīng)于駝峰命名屬性名，如：data-web-test屬(特)性就變成dataset.webTest屬性；如：

<div id="mydiv" data-appId="001" data-subtitle="zeronetwork" data-web-description="零點(diǎn)程序員"> 
// Javascript
var mydiv = document.getElementById("mydiv");
console.log(mydiv.dataset);  // DOMStringMap
console.log(mydiv.dataset.subtitle);  // zeronetwork
console.log(mydiv.dataset.webDescription);  // 零點(diǎn)程序員
console.log(mydiv.dataset.appid);  // 只能小寫(xiě)，不能是appId

設(shè)置或刪除dataset的一個(gè)屬性就等同于設(shè)置或移除對(duì)應(yīng)元素的data-屬(特)性，并且在將鍵值轉(zhuǎn)換為一個(gè)屬性的名稱(chēng)時(shí)會(huì)使用相反的轉(zhuǎn)換；

// 判斷有沒(méi)有該屬性
if(mydiv.dataset.myname){
    console.log(mydiv.dataset.myname);
}
mydiv.dataset.subtitle = "wangwei";  // 修改
mydiv.dataset.imgurl = "images/1.jpg";  // 添加
mydiv.dataset.userName = "wangwei";  // 添加，被轉(zhuǎn)換為data-user-name
delete mydiv.dataset.subtitle;  // 刪除
遍歷DOMStringMap對(duì)象；
for(var k in mydiv.dataset){
    console.log(k + ":" + mydiv.dataset[k]);
}

與getAttribute()和setAttribute()相比：

在效率上，dataset沒(méi)有上述兩個(gè)方法高，但是，這個(gè)影響可以忽略不計(jì)；從操作上來(lái)看，雖然使用dataset不能提高代碼的性能，但是對(duì)于簡(jiǎn)潔代碼，提高代碼的可讀性和可維護(hù)性是很有幫助的，如：

<div class="user" data-id="123" data-user-name="wangwei" data-sex="男" data-date-of-birth="1998/8/8"></div>
<div class="user" data-id="124" data-user-name="jingjing" data-sex="女" data-date-of-birth></div>
<div class="user" data-id="125" data-user-name="juanjuan" data-sex="女" data-date-of-birth="1995/5/5"></div>
<script>
var users = document.querySelectorAll(".user");
// 使用getAttribute()和setAttribute()
for(var i=0,len=users.length; i<len; i++){
    var user = users[i];
    var id = user.getAttribute("data-id");
    var username = user.getAttribute("data-user-name");
    var sex = user.getAttribute("data-sex");
    if(!user.getAttribute("data-date-of-birth"))
        // user.setAttribute("data-date-of-birth","2020-1-1");
    var dateofbirth = user.getAttribute("data-date-of-birth");
    console.log("ID:" + id + ",username:" + username + ",sex:" + sex + ",dateofbirth:" + dateofbirth);
}
// 使用dataset
for(var i=0,len=users.length; i<len; i++){
    var user = users[i];
    var id = user.dataset.id;
    var username = user.dataset.userName;
    var sex = user.dataset.sex;
    if(!user.dataset.dateOfBirth)
        user.dataset.dateOfBirth = "2020/1/1";
    var dateofbirth = user.dataset.dateOfBirth;
    console.log("ID:" + id + ",username:" + username + ",sex:" + sex + ",dateofbirth:" + dateofbirth);
}
</script>

另外，dataset屬性在IE中，只有IE11支持，所以在低版本的IE中，如果要使用dataset屬性，必須做兼容性處理；

if(mydiv.dataset){
    console.log(mydiv.dataset.subtitle);
    console.log(mydiv.dataset.webDescription);
}else{
    console.log(mydiv.getAttribute("data-subtitle"));
    console.log(mydiv.getAttribute("data-web-description"));
}
// 封裝一個(gè)函數(shù)
function getDataset(elt){
    if(elt.dataset)
        return elt.dataset;
    var attrs = elt.attributes,  // 元素的屬性集合
        dataset = {},   // 包裝的一個(gè)屬性集對(duì)象
        name,   // 要獲取的特性名
        matchStr;  // 匹配結(jié)果
    for(var i=0, len = attrs.length; i<len; i++){
        // 匹配data-自定義屬性
        matchStr = attrs[i].name.match(/^data-(.+)/);
        if(matchStr){
            // 轉(zhuǎn)成小駝峰
            name = matchStr[1].replace(/-([\da-z])/gi, function(all, letter){
                return letter.toUpperCase();
            });
            dataset[name] = attrs[i].value;
        }
    }
    return dataset;
}
var dataset = getDataset(mydiv);
console.log(dataset);

另外data-屬性并不是只在Javascript中使用，在CSS中應(yīng)用的場(chǎng)景也很多，如：

<style>
p[data-font-size='2em']{font-size: 2em;}
p[data-font-size='3em']{font-size: 3em;}
</style>
<p data-font-size="3em">零點(diǎn)程序員</p>
<p data-font-size="2em">王唯</p>
// 又如
<style>
#mydiv::after{background-color: rgba(0,0,0,.2); content: attr(data-content);}
</style>
<div id="mydiv" data-content="王唯是好人">大師哥</div>

dataset應(yīng)用的場(chǎng)景還是非常多的，一般來(lái)說(shuō)，為了給元素添加一些不可見(jiàn)的數(shù)據(jù)，并要進(jìn)行后續(xù)的處理，就可以用到自定義數(shù)據(jù)屬性；比如，配合CSS開(kāi)發(fā)一些動(dòng)畫(huà)效果，或在跟蹤鏈接等應(yīng)用中，通過(guò)自定義數(shù)據(jù)屬性能方便地知道點(diǎn)擊來(lái)自頁(yè)面中的哪個(gè)部分；

<a href="https://www.zeronetwork.cn" data-title="零點(diǎn)網(wǎng)絡(luò)">零點(diǎn)網(wǎng)絡(luò)</a>
<script>
window.onload = function(){
    var aElts = document.querySelectorAll("a");
    for(var i=0,len=aElts.length; i<len; i++){
        aElts[i].addEventListener("click",function(e){
            e.preventDefault();
            doDataset(this);
        },false);
    }
    var aDataset = [];
    function doDataset(elt){
      var o = {title:elt.dataset.title, href:elt.href, page:location.pathname};
        aDataset.push(o);
        console.log(aDataset);
    }
}
</script>
// 小示例
<style>
.banner{
    background:url("images/2.jpg") no-repeat center; background-size:cover;
}
.fadeInDown{opacity: 0; transform: translateY(20px);}
</style>
<div class="banner"> 
    <h2 class="fadeInDown" data-duration=".8" data-delay="400">零點(diǎn)程序員</h2>
    <h3 class="fadeInDown" data-duration="1" data-delay="800">大師哥王唯</h3>
    <p class="fadeInDown" data-duration="1" data-delay="1000"><a href="#">更多</a></p>
</div>
<script>
window.onload = function(){
    var elts = document.getElementsByClassName("fadeInDown");
    // for(var i=0,len=elts.length; i<len; i++){
    //  (function(){
    //      var elt = elts[i];
    //      var dataset = elt.dataset;
    //      setTimeout(function(){
    //          elt.style.opacity = 1;
    //          elt.style.transform = "translateY(-20px)";
    //          elt.style.transition = "all " + dataset.duration + "s linear";
    //      }, dataset.delay);
    //  })();
    // }
    Array.prototype.forEach.call(elts, function(v,k){
        console.log(v);
        var dataset = v.dataset;
        setTimeout(function(){
            v.style.opacity = 1;
            v.style.transform = "translateY(-10px)";
            v.style.transition = "all " + dataset.duration + "s linear";
        }, dataset.delay);
    });
}
</script>

Web前端開(kāi)發(fā)之Javascript

在線咨詢(xún)

上一篇：HTML教程（看完這篇就夠了）
下一篇：Html代碼常用功能，很資源噢！（中）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商