|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
$(document).height()與$(window).height()高度相同的原因
作者:admin 時間:2022-4-25 11:16:35 瀏覽:今天在寫一個JS程序的時候，發(fā)現(xiàn)執(zhí)行結(jié)果不符合預(yù)期，$(document).height() 與 $(window).height()高度永遠(yuǎn)相同。開始以為是代碼問題，后又以為是瀏覽器問題，最后才檢查出來，原來是 <!DOCTYPE> 與 <!DOCTYPE html> 的問題。
<!DOCTYPE> 與 <!DOCTYPE html> 導(dǎo)致JS執(zhí)行問題
當(dāng)時執(zhí)行的兩行代碼是：
var scrollHeight = $(document).height(); //文檔高度
console.log("$(document).height()=" + $(document).height());
var windowHeight = $(window).height(); //窗口高度
console.log("$(window).height()=" + $(window).height());
但是我得到的結(jié)果，不論文檔高度有多高，文檔高度永遠(yuǎn)與窗口高度值一樣，這是不符預(yù)期的。
看下面兩圖的控制臺，使用<!DOCTYPE> 時，$(document).height() 與 $(window).height() 的值永遠(yuǎn)相等。而使用 <!DOCTYPE html> 時，$(document).height() 與 $(window).height() 的值是不同的。
<!DOCTYPE>
<!DOCTYPE html>
為什么 <!DOCTYPE> 與 <!DOCTYPE html> 會影響JS正常執(zhí)行？這就涉及到 DOCTYPE 的作用意義了。
<!DOCTYPE>標(biāo)簽定義及使用說明：
- <!DOCTYPE> 聲明位于文檔中的最前面的位置，處于<html>之前
- <!DOCTYPE> 聲明不是一個HTML標(biāo)簽；它是用來告訴瀏覽器頁面使用了哪種HTML版本
- <!DOCTYPE> 標(biāo)簽沒有結(jié)束標(biāo)簽
- <!DOCTYPE> 聲明不區(qū)分大小寫
在 HTML 4.01 中，<!DOCTYPE> 聲明需引用 DTD （文檔類型聲明），因?yàn)?HTML 4.01 是基于 SGML （Standard Generalized Markup Language 標(biāo)準(zhǔn)通用標(biāo)記語言）。DTD 指定了標(biāo)記語言的規(guī)則，確保了瀏覽器能夠正確的渲染內(nèi)容。
HTML5 不是基于 SGML，因此不要求引用 DTD。
提示：總是給 HTML 文檔添加 <!DOCTYPE> 聲明，確保瀏覽器能夠預(yù)先知道文檔類型。
HTML4.01與HTML5之間的差距
HTML 4.01 規(guī)定了三種不同的 <!DOCTYPE> 聲明，分別是：Strict、Transitional 和 Frameset。 HTML5 中僅規(guī)定了一種：
<!DOCTYPE html>
常見的 DOCTYPE 聲明
1、HTML5
<!DOCTYPE html>
2、HTML 4.01 Strict
這個 DTD 包含所有 HTML 元素和屬性，但不包括表象或過時的元素（如 font ）?？蚣芗遣辉试S的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3、HTML 4.01 Transitional
這個 DTD 包含所有 HTML 元素和屬性，包括表象或過時的元素（如 font ）?？蚣芗遣辉试S的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4、HTML 4.01 Frameset
這個 DTD 與 HTML 4.01 Transitional 相同，但是允許使用框架集內(nèi)容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
總結(jié)
通過對DOCTYPE的了解，就應(yīng)該知道了為何<!DOCTYPE> 與 <!DOCTYPE html> 會影響JS正常執(zhí)行了，$(document).height()與$(window).height()高度相同的原因正是如此。
在寫代碼時要使用<!DOCTYPE html>而不是<!DOCTYPE>，告訴瀏覽器按照W3C的標(biāo)準(zhǔn)解析渲染頁面，不然JS可能不能正確獲得某些方法或?qū)傩灾怠?/p>
相關(guān)文章
- 4個實(shí)例演示——美化表單input輸入框CSS樣式
- 4款CSS 3D按鈕點(diǎn)擊過渡效果
- 純CSS實(shí)現(xiàn)具有漸變和圓角的彩色邊框
- 10款純CSS Tabs選項(xiàng)卡【實(shí)例演示/源碼下載】
- CSS+SVG：畫圓并且文字寫在圓中間
- CSS實(shí)現(xiàn)自右向左的豎向文字排布
- CSS+SVG實(shí)現(xiàn)環(huán)形/圓環(huán)文字效果【簡單實(shí)例】
- 純CSS實(shí)現(xiàn)環(huán)形文字效果
- css text-shadow 輕松實(shí)現(xiàn)文字投影/描邊/浮雕/剪紙/發(fā)光效果
- 純CSS：點(diǎn)擊輸入框時，標(biāo)簽（占位符）浮動可見
標(biāo)簽: DOCTYPE
- 站長推薦
