比較全的屏幕信息

 

 

更新 && 補充後：(2018/9/18)

 描述（摘自MDN）：

• offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相對於 offsetParent 的邊界框。

 

• clientLeft：

　　若是元素的文本方向是從右向左（RTL, right-to-left），而且因爲內容溢出致使左邊出現了一個垂直滾動條，則該屬性包括滾動條的寬度。clientLeft 不包括左外邊距和左內邊距。

 

• clientHeight：

　　對於沒有定義CSS或者內聯佈局盒子的元素爲0，不然，它是元素內部的高度(單位像素)，包含內邊距，但不包括水平滾動條、邊框和外邊距。

 

• scrollWidth：

　　若元素的寬度大於其內容的區域（例如，元素存在滾動條時）, scrollWidth的值要大於clientWidth。

 

• 　scrollHeight：

　　scrollHeight 的值等於該元素在不使用滾動條的狀況下爲了適應視口中所用內容所需的最小高度。

　　沒有垂直滾動條的狀況下，scrollHeight值與元素視圖填充全部內容所須要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after這樣的僞元素。

 

• scrollTop：

　　元素的頂部到它的最頂部可見內容（的頂部）的距離的度量。

　　元素的 scrollTop 值是這個元素的頂部到它的最頂部可見內容（的頂部）的距離的度量。當一個元素的內容沒有產生垂直方向的滾動條，那麼它的 scrollTop 值爲0。

 

• scrollLeft：

　　注意若是這個元素的內容排列方向（direction） 是rtl (right-to-left) ，那麼滾動條會位於最右側（內容開始處），而且scrollLeft值爲0。此時，當你從右到左拖動滾動條時，scrollLeft會從0變爲負數

 

  function getInfo() {
    var s = "";
    try{
      s += " ====== 元素的信息 ====== " + "<br>";
      s += " 元素左上角相對於  HTMLElement.offsetParent 節點的左邊界偏移的像素值：" + document.body.offsetLeft + "<br>";
      s += " 元素左上角相對於  HTMLElement.offsetParent 節點的左邊界偏移的像素值：" + document.documentElement.offsetLeft + "<br>";
      s += " 指向最近的（closest，指包含層級上的最近）包含該元素的定位元素：" + document.body.offsetParent + "<br>";
      s += " 指向最近的（closest，指包含層級上的最近）包含該元素的定位元素：" + document.documentElement.offsetParent + "<br>";
      s += " 元素相對於其 offsetParent 元素的頂部的距離：" + document.body.offsetTop + "<br>";
      s += " 元素相對於其 offsetParent 元素的頂部的距離：" + document.documentElement.offsetTop + "<br>";
      s += " 元素的佈局寬度（包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(scrollbar)（若是存在的話）、以及CSS設置的寬度(width)的值）：" + document.body.offsetWidth + "<br>";
      s += " 元素的佈局寬度（包含元素的邊框(border)、水平線上的內邊距(padding)、豎直方向滾動條(scrollbar)（若是存在的話）、以及CSS設置的寬度(width)的值）：" + document.documentElement.offsetWidth + "<br>";
      s += " 該元素的像素高度，高度包含該元素的垂直內邊距和邊框（包括元素的邊框、內邊距和元素的水平滾動條（若是存在且渲染的話），不包含:before或:after等僞類元素的高度）：" + document.body.offsetHeight + "<br>";
      s += " 該元素的像素高度，高度包含該元素的垂直內邊距和邊框（包括元素的邊框、內邊距和元素的水平滾動條（若是存在且渲染的話），不包含:before或:after等僞類元素的高度）：" + document.documentElement.offsetHeight + "<br>";
      s += " ====== " + "<br>";
      s += " 元素的左邊框的寬度：" + document.body.clientLeft + "<br>";
      s += " 元素的左邊框的寬度：" + document.documentElement.clientLeft + "<br>";
      s += " 元素頂部邊框的寬度（不包括頂部外邊距或內邊距。）：" + document.body.clientTop + "<br>";
      s += " 元素頂部邊框的寬度（不包括頂部外邊距或內邊距。）：" + document.documentElement.clientTop + "<br>";
      s += " 元素的內部寬度（該屬性包括內邊距，但不包括垂直滾動條（若是有）、邊框和外邊距。）：" + document.body.clientWidth + "<br>";
      s += " 元素的內部寬度（該屬性包括內邊距，但不包括垂直滾動條（若是有）、邊框和外邊距。）：" + document.documentElement.clientWidth + "<br>";
      s += " 元素的height + 元素的padding - 水平滾動條高度 (若是存在)：" + document.body.clientHeight + "<br>";
      s += " 元素的height + 元素的padding - 水平滾動條高度 (若是存在)：" + document.documentElement.clientHeight + "<br>";
      s += " ====== " + "<br>";
      s += " 元素的內容區域寬度或元素的自己的寬度中更大的那個值：" + document.body.scrollWidth + "<br>";
      s += " 元素的內容區域寬度或元素的自己的寬度中更大的那個值：" + document.documentElement.scrollWidth + "<br>";
      s += " 元素內容高度的度量，包括因爲溢出致使的視圖中不可見內容：" + document.body.scrollHeight + "<br>";
      s += " 元素內容高度的度量，包括因爲溢出致使的視圖中不可見內容：" + document.documentElement.scrollHeight + "<br>";
      s += " 元素的內容垂直滾動的像素數：" + document.body.scrollTop + "<br>";
      s += " 元素的內容垂直滾動的像素數：" + document.documentElement.scrollTop + "<br>";
      s += " 元素滾動條到元素左邊的距離：" + document.body.scrollLeft + "<br>";
      s += " 元素滾動條到元素左邊的距離：" + document.documentElement.scrollLeft + "<br>";
      s += " ====== window的信息 ====== " + "<br>";
      s += " 瀏覽器頂部距離系統桌面頂部的垂直距離" + window.screenTop + "<br>";
      s += " 瀏覽器頂部距離系統桌面頂部的垂直距離：" + window.screenY + "<br>";
      s += " 瀏覽器左邊界到操做系統桌面左邊界的水平距離：" + window.screenLeft + "<br>";
      s += " 瀏覽器左邊界到操做系統桌面左邊界的水平距離：" + window.screenX + "<br>";
      s += " ====== screen的信息 ====== " + "<br>";
      s += " 屏幕的寬度：" + window.screen.width + "<br>";
      s += " 屏幕的高度：" + window.screen.height + "<br>";
      s += " 瀏覽器窗口可佔用的水平寬度：" + window.screen.availWidth + "<br>";
      s += " 瀏覽器窗口在屏幕上可佔用的垂直空間，即最大高度：" + window.screen.availHeight + "<br>";
      s += " 屏幕的顏色深度： " + window.screen.colorDepth + "<br>";
    }catch(e){

    }
    // document.getElementById('test').innerHTML = s;
    document.write(s);
  }
  getInfo();

打印結果：

谷歌瀏覽器 69.0.3497.92（正式版本）

 

 火狐瀏覽器  62.0 

 

 IE高版本：（document.write沒有打印，搜到的解決辦法：動態加載外部js文件；該例子用innerHTML替代，）

 

 IE8：(用innerHTML打印)

 

 

 

 

 

---

 

function getInfo() 
{ 
var s = ""; 
s += " 網頁可見區域寬：" +document.body.clientWidth +"<br/>"; 
s += " 網頁可見區域高：" +document.body.clientHeight +"<br/>"; 
s += " 網頁可見區域寬：" +document.body.offsetWidth +" (包括邊線和滾動條的寬)" +"<br/>"; 
s += " 網頁可見區域高：" +document.body.offsetHeight +" (包括邊線的寬)" +"<br/>"; 
s += " 網頁正文全文寬：" +document.body.scrollWidth +"<br/>"; 
s += " 網頁正文全文高：" +document.body.scrollHeight +"<br/>"; 
s += " 網頁被捲去的高(ff)：" +document.body.scrollTop +"<br/>"; 
s += " 網頁被捲去的高(ie)：" +document.documentElement.scrollTop +"<br/>"; 
s += " 網頁被捲去的左：" +document.body.scrollLeft +"<br/>"; 
s += " 網頁正文部分上：" +window.screenTop +"<br/>"; 
s += " 網頁正文部分左：" +window.screenLeft +"<br/>"; 
s += " 屏幕分辨率的高：" +window.screen.height +"<br/>"; 
s += " 屏幕分辨率的寬：" +window.screen.width +"<br/>"; 
s += " 屏幕可用工做區高度：" +window.screen.availHeight +"<br/>"; 
s += " 屏幕可用工做區寬度：" +window.screen.availWidth +"<br/>";

s += " 你的屏幕設置是 " +window.screen.colorDepth +" 位彩色" +"<br/>"; 
s += " 你的屏幕設置 " +window.screen.deviceXDPI +" 像素/英寸" +"<br/>"; 
document.write (s); 
} 
getInfo();

輸出結果：