JavaScript 工作區(qū)滾動(dòng)距離及其兼容性

動(dòng)距離

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫(xiě)法:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

與 document.documentElement 屬性不同的是, document.body 屬性返回 <body> 元素, document.documentElement 屬性返回 <html> 元素。

根節(jié)點(diǎn)

有兩種特殊的文檔屬性可用來(lái)訪問(wèn)根節(jié)點(diǎn)：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一個(gè)屬性可返回存在于XML以及HTML文檔中的文檔根節(jié)點(diǎn)(html標(biāo)記)。

第二個(gè)屬性是對(duì)HTML頁(yè)面的特殊擴(kuò)展,提供了對(duì)<body>標(biāo)簽的直接訪問(wèn)(body標(biāo)記)。

窗口尺寸、工作區(qū)尺寸

可視區(qū)尺寸寬度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性寫(xiě)法：

document.documentElement.clientWidth || document.body.clientWidth;

可視區(qū)尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性寫(xiě)法：

document.documentElement.clientHeight || document.body.clientHeight;

獲取瀏覽器窗口水平滾動(dòng)條的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性寫(xiě)法：

document.documentElement.scrollLeft || document.body.scrollLeft;

獲取瀏覽器窗口垂直滾動(dòng)條的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性寫(xiě)法：

document.documentElement.scrollTop || document.body.scrollTop;

注意：IE、FF已經(jīng)支持documentElement對(duì)象的各種屬性, 而

以上兼容性寫(xiě)法不影響所獲的屬性值

編寫(xiě)自定義函數(shù)：

// 獲取瀏覽器窗口的可視區(qū)域的寬度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}

// 獲取瀏覽器窗口的可視區(qū)域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}

// 獲取瀏覽器窗口水平滾動(dòng)條的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 獲取瀏覽器窗口垂直滾動(dòng)條的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>聲明對(duì)JavaScript獲取窗口寬度和高度的影響

文來(lái)源于：程序員成長(zhǎng)指北；作者：去偽存真
如有侵權(quán)，聯(lián)系刪除

背景

最近在項(xiàng)目中要實(shí)現(xiàn)一個(gè)拖拽頭像的移動(dòng)效果，一直對(duì)JS Dom拖拽這一塊不太熟悉，甚至在網(wǎng)上找一個(gè)示例，都看得云里霧里的，發(fā)現(xiàn)遇到最大的攔路虎就是JS Dom各種各樣的距離，讓人頭暈眼花，看到一個(gè)距離屬性，大腦中的印象極其模糊，如同有一團(tuán)霧一樣，不知其確切含義。果然是基礎(chǔ)不牢，地動(dòng)山搖。今天決心夯實(shí)一下基礎(chǔ)，親自動(dòng)手驗(yàn)證一遍dom各種距離的含義。

JS Dom各種距離釋義

下面我們進(jìn)入正題, 筆者不善于畫(huà)圖, 主要是借助瀏覽器開(kāi)發(fā)者工具，通過(guò)獲取的數(shù)值給大家說(shuō)明一下各種距離的區(qū)別。

第一個(gè)發(fā)現(xiàn) window.devicePixelRatio 的存在

本打算用截圖軟件丈量尺寸，結(jié)果發(fā)現(xiàn)截圖軟件顯示的屏幕寬度與瀏覽器開(kāi)發(fā)者工具獲取的寬度不一致，這是為什么呢?

截圖軟件顯示的屏幕寬度是1920

window.screen.width顯示的屏幕寬度是1536

這是怎么回事？原來(lái)在PC端，也存在一個(gè)設(shè)備像素比的概念。它告訴瀏覽器一個(gè)css像素應(yīng)該使用多少個(gè)物理像素來(lái)繪制。要說(shuō)設(shè)備像素比，得先說(shuō)一下像素和分辨率這兩個(gè)概念。

像素屏幕中最小的色塊，每個(gè)色塊稱之為一個(gè)像素（Pixel）

分辨率 分辨率=屏幕水平方向的像素點(diǎn)數(shù) * 屏幕垂直方向的像素點(diǎn)數(shù); 另外說(shuō)一下,關(guān)于分辨率有多種定義,可以細(xì)分為顯示分辨率[1]、圖像分辨率[2]、打印分辨率[3]和掃描分辨率[4]等，此處是指顯示分辨率。

設(shè)備像素比

設(shè)備像素比的定義是：

window.devicePixelRatio =顯示設(shè)備物理像素分辨率顯示設(shè)備CSS像素分辨率\frac{顯示設(shè)備物理像素分辨率}{顯示設(shè)備CSS像素分辨率}顯示設(shè)備CSS像素分辨率顯示設(shè)備物理像素分辨率

根據(jù)設(shè)備像素比的定義, 如果知道顯示設(shè)備橫向的css像素值，根據(jù)上面的公式，就能計(jì)算出顯示設(shè)備橫向的物理像素值。

顯示設(shè)備寬度物理像素值 = window.screen.width * window.devicePixelRatio;

設(shè)備像素比在我的筆記本電腦上顯示的數(shù)值是1.25, 代表一個(gè)css邏輯像素對(duì)應(yīng)著1.25個(gè)物理像素。

我前面的公式計(jì)算了一下，與截圖軟件顯示的像素?cái)?shù)值一致。這也反過(guò)來(lái)說(shuō)明，截圖軟件顯示的是物理像素值。

window.devicePixelRatio 是由什么決定的 ?

發(fā)現(xiàn)是由筆記本電腦屏幕的縮放設(shè)置決定的，如果設(shè)置成100%, 此時(shí)window.screen.width與筆記本電腦的顯示器分辨率X軸方向的數(shù)值一致,都是1920(如右側(cè)圖所示), 此時(shí)屏幕上的字會(huì)變得比較小,比較傷視力。

邏輯像素是為了解決什么問(wèn)題?

邏輯像素是為了解決屏幕相同，分辨率不同的兩臺(tái)顯示設(shè)備，顯示同一張圖片大小明顯不一致的問(wèn)題。比如說(shuō)兩臺(tái)筆記本都是15英寸的，一個(gè)分辨率是1920*1080,一個(gè)分辨率是960*540, 在1920*1080分辨率的設(shè)備上，每個(gè)格子比較小，在960*540分辨率的設(shè)備上，每個(gè)格子比較大。一張200*200的圖片，在高分率的設(shè)備上看起來(lái)會(huì)比較小，在低分辨率的設(shè)備上，看起來(lái)會(huì)比較大。觀感不好。為了使同樣尺寸的圖片，在兩臺(tái)屏幕尺寸一樣大的設(shè)備上，顯示尺寸看起來(lái)差不多一樣大，發(fā)明了邏輯像素這個(gè)概念。

規(guī)定所有電子設(shè)備呈現(xiàn)的圖片等資源尺寸統(tǒng)一用邏輯像素表示。然后在高分辨率設(shè)備上，提高devicePixelRatio, 比如說(shuō)設(shè)置1920*1080設(shè)備的devicePixelRatio(dpr)等于2, 一個(gè)邏輯像素占用兩個(gè)格子,在低分辨率設(shè)備上，比如說(shuō)在960*540設(shè)備上設(shè)置dpr=1, 一個(gè)css邏輯像素占一個(gè)格子, 這樣兩張圖片在同樣的設(shè)備上尺寸大小就差不多了。通常設(shè)備上的邏輯像素是等于物理像素的，在高分辨率設(shè)備上，物理像素是大于邏輯像素?cái)?shù)量的。由此也可以看出，物理像素一出廠就是固定的，而設(shè)備的邏輯像素會(huì)隨著設(shè)備像素比設(shè)置的值不同而改變。但圖片的邏輯像素值是不變的。

document.body、document.documentElement和window.screen的寬高區(qū)別

差別是很容易辨別的，如下圖所示：

document.body -- body標(biāo)簽的寬高
document.documentElement -- 網(wǎng)頁(yè)可視區(qū)域的寬高(不包括滾動(dòng)條)
window.screen -- 屏幕的寬高

網(wǎng)頁(yè)可視區(qū)域不包括滾動(dòng)條

如下圖所示，截圖時(shí)在未把網(wǎng)頁(yè)可視區(qū)域的滾動(dòng)條高度計(jì)算在內(nèi)的條件下, 截圖工具顯示的網(wǎng)頁(yè)可視區(qū)域高度是168, 瀏覽器顯示的網(wǎng)頁(yè)可視區(qū)域的高度是167.5, 誤差0.5，由于截圖工具是手動(dòng)截圖，肯定有誤差，結(jié)果表明，網(wǎng)頁(yè)可視區(qū)域的高度 不包括滾動(dòng)條高度。寬度同理。

屏幕和網(wǎng)頁(yè)可視區(qū)域的寬高區(qū)別如下：

屏幕寬高是個(gè)固定值，網(wǎng)頁(yè)可視區(qū)域?qū)捀邥?huì)受到縮放窗口影響。

屏幕高度和屏幕可用高度區(qū)別如下：

屏幕可用高度=屏幕高度-屏幕下方任務(wù)欄的高度，也就是：

window.screen.availHeight = window.screen.height - 系統(tǒng)任務(wù)欄高度

scrollWidth, scrollLeft, clientWidth關(guān)系

scrollWidth(滾動(dòng)寬度,包含滾動(dòng)條的寬度)=scrollLeft(左邊卷去的距離)+clientWidth(可見(jiàn)部分寬度); 
// 同理 
scrollHeight(滾動(dòng)高度,包含滾動(dòng)條的高度)=scrollTop(上邊卷去的距離)+clientHeight(可見(jiàn)部分高度);

需要注意的是，上面這三個(gè)屬性，都取的是溢出元素的父級(jí)元素屬性。而不是溢出元素本身。本例中溢出元素是body(document.body),其父級(jí)元素是html(document.documentElement)。另外，

溢出元素的寬度(document.body.scrollWidth）=父級(jí)元素的寬度(document.documentElement.scrollWidth) - 滾動(dòng)條的寬度(在谷歌瀏覽器上滾動(dòng)條的寬度是19px)

<!DOCTYPE html> 
<html lang="en"> 
  <head>     
    <meta charset="UTF-8">     
    <meta http-equiv="X-UA-Compatible" content="IE=edge">     
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->     
    <title>JS Dom各種距離</title>     
    <style>         
      html, body {             
        margin: 0;         
      }         
      body {             
        width: 110%;             
        border: 10px solid blue;         
      }         
      .rect {             
        height: 50px;             
        background-color: green;         
      }     
    </style> 
  </head> 
  <body>     
    <div id="rect" class="rect"></div> 
  </body> 
</html>

元素自身和父級(jí)元素的scrollWidth和scrollLeft關(guān)系?

從下圖可以看出:

元素自身沒(méi)有X軸偏移量，元素自身的滾動(dòng)寬度不包含滾動(dòng)條
父級(jí)元素有X軸便宜量, 父級(jí)元素滾動(dòng)寬度包含滾動(dòng)條

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        div {
            border: 1px solid #000;
            width: 200px;
            height: 600px;
            padding: 10px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="rect">    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    </div>
</body>
<script>
</script>
</html>

offsetWidth和clientWidth的關(guān)系?

offsetWidth和clientWidth的共同點(diǎn)是都包括自身寬度+padding , 不同點(diǎn)是offsetWidth包含border。

如下圖所示:

rect元素的clientWidth=200px(自身寬度) + 20px(左右padding) = 220px
rect元素的offsetWidth=200px(自身寬度) + 20px(左右padding) + 2px(左右boder) = 222px

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        div {
            border: 1px solid #000;
            width: 200px;
            height: 100px;
            padding: 10px;
            background-color: green;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="rect">111111111111111111111111111111111111111111111111</div>
</body>
<script>


</script>

</html>

event.clientX，event.clientY, event.offsetX 和 event.offsetY 關(guān)系

代碼如下，給rect元素添加一個(gè)mousedown事件，打印出事件源的各種位置值。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>JS Dom各種距離</title>
    <style>
        html,
        body {
            margin: 0;
        }

        body {
            width: 200px;
            padding: 10px;
            border: 10px solid blue;
        }

        .rect {
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>

    <div id="rect" class="rect"></div>


</body>
<script>
    const rectDom = document.querySelector('#rect');

    rectDom.addEventListener('mousedown', ({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY }) => {
        console.log({ offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY });
    })
</script>

</html>

我們通過(guò)y軸方向的高度值,了解一下這幾個(gè)屬性的含義。綠色塊的高度是50px, 我們找個(gè)特殊的位置（綠色塊的右小角）點(diǎn)擊一下，如下圖所示:

offsetY=49, 反推出這個(gè)值是相對(duì)于元素自身的頂部的距離
clientY=69, body標(biāo)簽的border-top是10，paiding是10, 反推出這個(gè)值是相對(duì)網(wǎng)頁(yè)可視區(qū)域頂部的距離
screenY=140，目測(cè)肯定是基于瀏覽器窗口，

所以它們各自的含義,就很清楚了。

事件源屬性	表示的距離
event.offsetX、event.offsetY	鼠標(biāo)相對(duì)于事件源元素（srcElement）的X,Y坐標(biāo)，
event.clientX、event.clientY	鼠標(biāo)相對(duì)于瀏覽器窗口可視區(qū)域的X，Y坐標(biāo)（窗口坐標(biāo)），可視區(qū)域不包括工具欄和滾動(dòng)偏移量。
event.pageX、event.pageY	鼠標(biāo)相對(duì)于文檔坐標(biāo)的x,y坐標(biāo)，文檔坐標(biāo)系坐標(biāo) ＝視口坐標(biāo)系坐標(biāo) ＋滾動(dòng)的偏移量
event.screenX、event.screenY	鼠標(biāo)相對(duì)于用戶顯示器屏幕左上角的X,Y坐標(biāo)

pageX和clientX的關(guān)系

我們點(diǎn)擊下圖綠色塊的右下角，把pageX和clientX值打印出來(lái)。如下圖所示:

可視區(qū)域的寬度是360，點(diǎn)擊點(diǎn)的clientX=359(由于是手動(dòng)點(diǎn)擊,有誤差也正常)
水平方向的偏移量是56
pageX是415，360+56=416,考慮到點(diǎn)擊誤差，可以推算出 ele.pageX = ele.clientX + ele.scrollLeft

getBoundingClientRect獲取的top,bottom,left,right的含義

從下圖可以看出，上下左右這四個(gè)屬性，都是相對(duì)于瀏覽器可視區(qū)域左上角而言的。

從下圖可以看出，當(dāng)有滾動(dòng)條出現(xiàn)的時(shí)候，right的值是359.6，而不是360+156(x軸的偏移量), 說(shuō)明通過(guò)getBoundingClientRect獲取的屬性值是不計(jì)算滾動(dòng)偏移量的，是相對(duì)瀏覽器可視區(qū)域而言的。

movementX和movementY的含義?

MouseEvent.movementX/movementX是一個(gè)相對(duì)偏移量。返回當(dāng)前位置與上一個(gè)mousemove事件之間的水平/垂直距離。以當(dāng)前位置為基準(zhǔn), 鼠標(biāo)向左移動(dòng), movementX就是負(fù)值，向右移動(dòng)，movementX就是正值。鼠標(biāo)向上移動(dòng),movementY就是負(fù)值，向下移動(dòng)，movementY就是正值。數(shù)值上，它們等于下面的計(jì)算公式。這兩個(gè)值在設(shè)置拖拽距離的時(shí)候高頻使用，用起來(lái)很方便。

curEvent.movementX = curEvent.screenX - prevEvent.screenX; 
curEvent.movementY = curEvent.screenY - prevEvent.screenY;

想移動(dòng)元素，mouse和drag事件怎么選?

mouse事件相對(duì)簡(jiǎn)單，只有mousedown(開(kāi)始),mousemove(移動(dòng)中),mouseup(結(jié)束)三種。與之對(duì)應(yīng)的移動(dòng)端事件是touch事件，也是三種touchstart(手指觸摸屏幕), touchmove(手指在屏幕上移動(dòng)), touchend(手指離開(kāi)屏幕)。

相對(duì)而言, drag事件就要豐富一些。

被拖拽元素事件

事件名	觸發(fā)時(shí)機(jī)	觸發(fā)次數(shù)
dragstart	拖拽開(kāi)始時(shí)觸發(fā)一次	1
drag	拖拽開(kāi)始后反復(fù)觸發(fā)	多次
dragend	拖拽結(jié)束后觸發(fā)一次	1

目標(biāo)容器事件

事件名	觸發(fā)時(shí)機(jī)	觸發(fā)次數(shù)
dragenter	被拖拽元素進(jìn)入目標(biāo)時(shí)觸發(fā)一次	1
dragover	被拖拽元素在目標(biāo)容器范圍內(nèi)時(shí)反復(fù)觸發(fā)	多次
drop	被拖拽元素在目標(biāo)容器內(nèi)釋放時(shí)(前提是設(shè)置了dropover事件)	1

想要移動(dòng)一個(gè)元素，該如何選擇這兩種事件類型呢？選擇依據(jù)是:

類型	選擇依據(jù)
mouse事件	1. 要求絲滑的拖拽體驗(yàn) 2. 無(wú)固定的拖拽區(qū)域 3. 無(wú)需傳數(shù)據(jù)
drag事件	1. 拖拽區(qū)域有范圍限制 2. 對(duì)拖拽流暢性要求不高 3. 拖拽時(shí)需要傳數(shù)據(jù)

現(xiàn)在讓我們寫(xiě)個(gè)拖拽效果

光說(shuō)不練假把式, 掃清了學(xué)習(xí)障礙后，讓我們自信滿滿地寫(xiě)一個(gè)兼容PC端和移動(dòng)端的拖動(dòng)效果。不積跬步無(wú)以至千里，幻想一口吃個(gè)胖子，是不現(xiàn)實(shí)的。這一點(diǎn)在股市上體現(xiàn)的淋漓盡致。都是有耐心的人賺急躁的人的錢(qián)。所以，要我們沉下心來(lái)，打牢基礎(chǔ)，硬骨頭啃一點(diǎn)就會(huì)少一點(diǎn)，步步為營(yíng)，穩(wěn)扎穩(wěn)打，硬骨頭也會(huì)被啃成渣。

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

<head>
        
    <meta charset="UTF-8" />    
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
    <title>移動(dòng)小鳥(niǎo)</title>
    <style>
        body {
            margin: 0;
            font-size: 0;
            position: relative;
            height: 100vh;
        }

        .bird {
            position: absolute;
            width: 100px;
            height: 100px;
            cursor: grab;
            z-index: 10;
        }
    </style>
</head>

<body>
    <img class="bird" src="./bird.png" alt="" />  
</body>

<script>
    let evtName = getEventName();
    // 鼠標(biāo)指針相對(duì)于瀏覽器可視區(qū)域的偏移
    let offsetX = 0, offsetY = 0;
    // 限制圖片可以X和Y軸可以移動(dòng)的最大范圍，防止溢出
    let limitX = 0, limitY = 0;

    // 確保圖片加載完
    window.onload = () => {
        const bird = document.querySelector(".bird");
        const { width, height } = bird;

        limitX = document.documentElement.clientWidth - width;
        limitY = document.documentElement.clientHeight - height;

        bird.addEventListener(evtName.start, (event) => {
            // 監(jiān)聽(tīng)鼠標(biāo)指針相對(duì)于可視窗口移動(dòng)的距離
            // 注意移動(dòng)事件要綁定在document元素上，防止移動(dòng)過(guò)快,位置丟失
            document.addEventListener(evtName.move, moveAt);
        });

        // 鼠標(biāo)指針停止移動(dòng)時(shí),釋放document上綁定的移動(dòng)事件
        // 不然白白產(chǎn)生性能開(kāi)銷
        document.addEventListener(evtName.end, () => {
            document.removeEventListener(evtName.move, moveAt);
        })

        // 移動(dòng)元素
        function moveAt({ movementX, movementY }) {
            const { offsetX, offsetY } = getSafeOffset({ movementX, movementY });

            window.requestAnimationFrame(() => {
                bird.style.cssText = `left:${offsetX}px;top:${offsetY}px;`;
            });
        };
    };

    // 獲取安全的偏移距離
    const getSafeOffset = ({ movementX, movementY }) => {
        // //距上次鼠標(biāo)位置的X,Y方向的偏移量
        offsetX += movementX;
        offsetY += movementY;

        // 防止拖拽元素被甩出可視區(qū)域
        if (offsetX > limitX) {
            offsetX = limitX;
        }

        if (offsetX < 0) {
            offsetX = 0;
        }

        if (offsetY > limitY) {
            offsetY = limitY;
        }

        if (offsetY < 0) {
            offsetY = 0;
        }

        // console.log({ movementX, movementY, offsetX, offsetY });
        return { offsetX, offsetY };
    }

    // 區(qū)分是移動(dòng)端還是PC端移動(dòng)事件
    function getEventName() {
        if ("ontouchstart" in window) {
            return {
                start: "touchstart",
                move: "touchmove",
                end: "touchend",
            };
        } else {
            return {
                start: "pointerdown",
                move: "pointermove",
                end: "pointerup",
            };
        }
    }
</script>

</html>

彩蛋

在chrome瀏覽器上發(fā)現(xiàn)一個(gè)奇怪的現(xiàn)象,設(shè)置的border值是整數(shù)，計(jì)算出來(lái)的值卻帶有小數(shù)

而當(dāng)border值是4的整數(shù)倍的時(shí)候,計(jì)算值是正確的

看了這篇文章[5]解釋說(shuō)，瀏覽器可能只能渲染具有整數(shù)物理像素的border值，不是整數(shù)物理像素的值時(shí)，計(jì)算出的是近似border值。這個(gè)解釋似乎講得通，在設(shè)備像素比是window.devicePixelRatio=1.25的情況下, 1px對(duì)應(yīng)的是1.25物理像素, 1.25*4的倍數(shù)才是整數(shù)，所以設(shè)置的邏輯像素是4的整數(shù)倍數(shù)，顯示的渲染計(jì)算值與設(shè)置值一致,唯一讓人不理解的地方，為什么padding,margin，width/height卻不遵循同樣的規(guī)則。

參考資料

[1] https://baike.baidu.com/item/%E6%98%BE%E7%A4%BA%E5%88%86%E8%BE%A8%E7%8E%87/3431933?fromModule=lemma_inlink

[2] https://baike.baidu.com/item/%E5%9B%BE%E5%83%8F%E5%88%86%E8%BE%A8%E7%8E%87/872374?fromModule=lemma_inlink

[3] https://baike.baidu.com/item/%E6%89%93%E5%8D%B0%E5%88%86%E8%BE%A8%E7%8E%87/9560832?fromModule=lemma_inlink

[4] https://baike.baidu.com/item/%E6%89%AB%E6%8F%8F%E5%88%86%E8%BE%A8%E7%8E%87/7122498?fromModule=lemma_inlink

[5] https://www.w3.org/TR/CSS22/cascade.html#specified-value

格空間設(shè)置

通過(guò)為<table></table>標(biāo)簽的cellspacing進(jìn)行賦值可以調(diào)整單元格與單元格之間的空間距離。

示例代碼如下：

<table border = "1" width = "100%" cellspacing = "50">

頁(yè)面效果如下：

下面我們刪除cellspacing = "50"這段代碼看看變化，如圖：

通過(guò)對(duì)比，大家應(yīng)該明白cellspacing這個(gè)屬性的作用了吧。

通過(guò)為<table></table>標(biāo)簽的cellpadding進(jìn)行賦值可以調(diào)整單元格邊框與單元格內(nèi)容之間的空間距離。

示例代碼如下：

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">

頁(yè)面效果如下：

通過(guò)與上圖對(duì)比，我們不難發(fā)現(xiàn)變化。

設(shè)置表格顏色

這里我們要介紹一個(gè)全局屬性style，對(duì)，你沒(méi)看錯(cuò)！就是freestyle的那個(gè)style！英文翻譯過(guò)來(lái)是"樣式"、"風(fēng)格"的意思。我們通過(guò)這個(gè)屬性可以為表格設(shè)置顏色。實(shí)際上，可以為任何html元素設(shè)置顏色、大小、排列等不同屬性！

值得一提的是把style信息如果寫(xiě)到一個(gè)獨(dú)立文件中，并保存為css文件，就是以后我們要學(xué)的CSS層疊樣式列表了。

這里我們先來(lái)簡(jiǎn)單了解一下它作為html的一個(gè)全局屬性的用法。

示例代碼如下：

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">

頁(yè)面效果如圖所示：

我們來(lái)分析一下這段代碼，寫(xiě)法和其他屬性大同小異。

首先也是才有"屬性"="數(shù)值"的寫(xiě)法，具體是：style=""

是不是和其他屬性寫(xiě)法一樣？

但是到了雙引號(hào)里面就不同了，比如width屬性只需要為其賦值就可以，比如width="100%"。

而style是在雙引號(hào)里面再指定屬性。例如：style="background-color"。

然后我們?cè)贋閎ackground-color（背景顏色）屬性賦值。

這時(shí)，賦值的寫(xiě)法就發(fā)生變化了，不是使用=號(hào)，而是使用：。

例如style="background-color ： #00ffff；"

大家注意的是為其賦值后，要用；結(jié)尾。這個(gè)；必須要添加，因?yàn)椋ㄟ^(guò)style可以指定多個(gè)不同的樣式屬性，在指定多個(gè)樣式屬性時(shí)，我們使用；分割。

#00ffff這個(gè)符號(hào)是色彩的16進(jìn)制表示方法，這個(gè)顏色是藍(lán)色。

#000000這個(gè)符號(hào)的顏色是黑色。

#ffffff這個(gè)符號(hào)是白色。

這個(gè)顏色的算法我們會(huì)在下一期中詳細(xì)講解，感興趣的小伙伴請(qǐng)關(guān)注！

大家想一想。如何為一列單元格指定背景顏色呢？

示例代碼如下：我們?yōu)楸砀駱?biāo)題欄賦予綠色。

<tr style = "background-color: #00ff00;"><th>姓名</th><th>年齡</th></tr>

頁(yè)面效果如圖所示：

下面我們?yōu)?#34;一列一行"、"二列一行"賦予紅色。

示例代碼如下：

<tr>
  <td style = "background-color: #ff0000;">一列一行</td>
  <td>一列二行</td>
</tr>
<tr>
    <td style = "background-color: #ff0000;">二列一行</td>
    <td>二列二行</td>
</tr>

頁(yè)面效果如下：

今天的內(nèi)容到此結(jié)束了，一下是今天示例的全部代碼：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個(gè)網(wǎng)頁(yè)</title>
  </head> 
  <body>
  <h1>第一個(gè)網(wǎng)頁(yè)</h1><hr>
  <h2>表格元素</h2><hr>
  <table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
  <caption>表格標(biāo)題</caption>
  <tr style = "background-color: #00ff00;">
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td style = "background-color: #ff0000;">一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td style = "background-color: #ff0000;">二列一行</td>
  <td>二列二行</td>
  </tr>
  </table>
  </body> 
  </html>

明天將繼續(xù)為大家講解頁(yè)面制作中16進(jìn)制的顏色指定方式和另外一種表格顏色指定方式。

喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！

HTML完整學(xué)習(xí)目錄

HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

在線咨詢

上一篇：如何讓dedecms實(shí)現(xiàn)shtml
下一篇：JavaScript (HTML5) 圖表控件AnyChart v7.10.1發(fā)布

您的項(xiàng)目需求

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

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

JavaScript 工作區(qū)滾動(dòng)距離及其兼容性

背景

JS Dom各種距離釋義

第一個(gè)發(fā)現(xiàn) window.devicePixelRatio 的存在

document.body、document.documentElement和window.screen的寬高區(qū)別

scrollWidth, scrollLeft, clientWidth關(guān)系

元素自身和父級(jí)元素的scrollWidth和scrollLeft關(guān)系?

offsetWidth和clientWidth的關(guān)系?

event.clientX，event.clientY, event.offsetX 和 event.offsetY 關(guān)系

getBoundingClientRect獲取的top,bottom,left,right的含義

movementX和movementY的含義?

想移動(dòng)元素，mouse和drag事件怎么選?

現(xiàn)在讓我們寫(xiě)個(gè)拖拽效果

彩蛋

參考資料

格空間設(shè)置

HTML完整學(xué)習(xí)目錄

您的項(xiàng)目需求