|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
$(document).height()與$(window).height()高度相同的原因
作者:admin 時間:2022-4-25 11:16:35 瀏覽:今天在寫一個JS程序的時候，發(fā)現執(zhí)行結果不符合預期，$(document).height() 與 $(window).height()高度永遠相同。開始以為是代碼問題，后又以為是瀏覽器問題，最后才檢查出來，原來是 <!DOCTYPE> 與 <!DOCTYPE html> 的問題。
<!DOCTYPE> 與 <!DOCTYPE html> 導致JS執(zhí)行問題
當時執(zhí)行的兩行代碼是：
var scrollHeight = $(document).height(); //文檔高度
console.log("$(document).height()=" + $(document).height());
var windowHeight = $(window).height(); //窗口高度
console.log("$(window).height()=" + $(window).height());
但是我得到的結果，不論文檔高度有多高，文檔高度永遠與窗口高度值一樣，這是不符預期的。
看下面兩圖的控制臺，使用<!DOCTYPE> 時，$(document).height() 與 $(window).height() 的值永遠相等。而使用 <!DOCTYPE html> 時，$(document).height() 與 $(window).height() 的值是不同的。
<!DOCTYPE>
<!DOCTYPE html>
為什么 <!DOCTYPE> 與 <!DOCTYPE html> 會影響JS正常執(zhí)行？這就涉及到 DOCTYPE 的作用意義了。
<!DOCTYPE>標簽定義及使用說明：
- <!DOCTYPE> 聲明位于文檔中的最前面的位置，處于<html>之前
- <!DOCTYPE> 聲明不是一個HTML標簽；它是用來告訴瀏覽器頁面使用了哪種HTML版本
- <!DOCTYPE> 標簽沒有結束標簽
- <!DOCTYPE> 聲明不區(qū)分大小寫
在 HTML 4.01 中，<!DOCTYPE> 聲明需引用 DTD （文檔類型聲明），因為 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 標準通用標記語言）。DTD 指定了標記語言的規(guī)則，確保了瀏覽器能夠正確的渲染內容。
HTML5 不是基于 SGML，因此不要求引用 DTD。
提示：總是給 HTML 文檔添加 <!DOCTYPE> 聲明，確保瀏覽器能夠預先知道文檔類型。
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 相同，但是允許使用框架集內容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
總結
通過對DOCTYPE的了解，就應該知道了為何<!DOCTYPE> 與 <!DOCTYPE html> 會影響JS正常執(zhí)行了，$(document).height()與$(window).height()高度相同的原因正是如此。
在寫代碼時要使用<!DOCTYPE html>而不是<!DOCTYPE>，告訴瀏覽器按照W3C的標準解析渲染頁面，不然JS可能不能正確獲得某些方法或屬性值。
相關文章
標簽: DOCTYPE
