<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          js獲取元素,頁面,屏幕,瀏覽器的寬度、高度方法總匯

          時間:?2017-12-12閱讀:?1805標簽:?寬高

          基礎概念

          為了方便理解,我們需要了解幾個基礎概念,每個HTML元素都有下列屬性

          offsetWidth

          clientWidth

          scrollWidth

          offsetHeight

          clientHeight

          scrollHeight

          offsetLeft

          clientLeft

          scrollLeft

          offsetTop

          clientTop

          scrollTop

          1. clientHeight和clientWidth用于描述元素內尺寸,是指 元素內容+內邊距 大小,不包括邊框(IE下實際包括)、外邊距、滾動條部分

          2. offsetHeight和offsetWidth用于描述元素外尺寸,是指 元素內容+內邊距+邊框,不包括外邊距和滾動條部分

          3. clientTop和clientLeft返回內邊距的邊緣和邊框的外邊緣之間的水平和垂直距離,也就是左,上邊框寬度

          4. offsetTop和offsetLeft表示該元素的左上角(邊框外邊緣)與已定位的父容器(offsetParent對象)左上角的距離

          5. offsetParent對象是指元素最近的定位(relative,absolute)祖先元素,遞歸上溯,如果沒有祖先元素是定位的話,會返回null

          6. scrollWidth和scrollHeight是元素的內容區域加上內邊距加上溢出尺寸,當內容正好和內容區域匹配沒有溢出時,這些屬性與clientWidth和clientHeight相等

          7. scrollLeft和scrollTop是指元素滾動條位置,它們是可寫


          常用的獲取網頁,屏幕,滾動條等寬高

          document.body.clientWidth - 網頁可見區域寬
          document.body.clientHeight - 網頁可見區域高


          document.body.offsetWidth - 網頁可見區域寬,包括邊線和滾動條的寬
          document.body.offsetHeight - 網頁可見區域高,包括邊線和滾動條的高[FF,chrom下是整個頁面高,IE opera 下正常]


          document.body.scrollWidth - 網頁總寬
          document.body.scrollHeight - 網頁總高


          document.body.scrollTop - 有滾動條的時候,向下拖動滾動條,上方不顯示的那部分高度
          document.body.scrollLeft - 同上


          window.innerHeight - 瀏覽器窗口的內部高度

          window.innerWidth - 瀏覽器窗口的內部寬度


          window.screenTop - 網頁正文部分上[網頁文檔的最上方距離屏幕最上方的距離,但FF不支持,Chrom,IE,Opera表現都不同,慎用]
          window.screenLeft - 網頁正文部分左[網頁文檔的最左方距離屏幕最左方的距離,但FF不支持,Chrom,IE,Opera表現都不同,慎用]


          window.screen.height - 屏幕分辨率的高度
          window.screen.width - 屏幕分辨率的寬度


          window.screen.availHeight - 可用工作區高度[整個屏幕但不包括下方任務欄]
          window.screen.availWidth - 可用工作區寬度[整個屏幕的寬度]


          window.screen.clorDepth - 屏幕色彩,常用的16,32位等
          window.screen.deviceXDPI - 屏幕像素/英寸【IE支持,其它不支持】

          <script>
          function getInfo()
          {
            var s = "";
            s += " 網頁可見區域寬:"+ document.body.clientWidth;
            s += " 網頁可見區域高:"+ document.body.clientHeight;
            s += " 網頁可見區域寬:"+ document.body.offsetWidth + " (包括邊線和滾動條的寬)";
            s += " 網頁可見區域高:"+ document.body.offsetHeight + " (包括邊線的寬)";
            s += " 網頁正文全文寬:"+ document.body.scrollWidth;
            s += " 網頁正文全文高:"+ document.body.scrollHeight;
            s += " 網頁被卷去的高(ff):"+ document.body.scrollTop;
            s += " 網頁被卷去的高(ie):"+ document.documentElement.scrollTop;
            s += " 網頁被卷去的左:"+ document.body.scrollLeft;
            s += " 網頁正文部分上:"+ window.screenTop;
            s += " 網頁正文部分左:"+ window.screenLeft;
            s += " 屏幕分辨率的高:"+ window.screen.height;
            s += " 屏幕分辨率的寬:"+ window.screen.width;
            s += " 屏幕可用工作區高度:"+ window.screen.availHeight;
            s += " 屏幕可用工作區寬度:"+ window.screen.availWidth;
            s += " 你的屏幕設置是 "+ window.screen.colorDepth +" 位彩色";
            s += " 你的屏幕設置 "+ window.screen.deviceXDPI +" 像素/英寸";
            //alert (s);
          }
          getInfo();
          </script>


          js獲取元素的寬高

          <div id="box"></div>
          #box{
              background-color: lightgrey;
              width: 300px;
              border: 25px solid green;
              padding: 25px;
              margin: 25px;
              height:60px;
          }
          //獲取盒子的內容高度,內容高度也可用用box.clientHeight獲取,內容高度不包括邊框和外邊距和滾動條
          var box = document.getElementById("box")
          var contentHeight = window.getComputedStyle(box).height //輸出 '60px'
          
          //獲取盒子客戶端的高度
          box.clientHeight //輸出110 (內容高度+padding * 2)
          
          //獲取盒子自身實際高度
          box.offsetHeight //輸出160 (內容高度 + 內邊距*2 +邊框*2)

          如果box的父容器沒有設置定位,則box.offsetLeft是相對body而言,否則是根據離它最近且有設置定位的父容器而言 

          box.offsetLeft //獲取box盒子相對它的父容器水平的偏移 

          box.offsetTop //獲取box盒子相對它的父容器垂直的偏移 當一個容器設置高度,如果該容器有滾動條,則該容器的內容高度要減去滾動條的高度,滾動條的高度一般為17px。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/242

          css如何實現保持div等高寬比?

          那么css如何實現高度height隨寬度width變化保持比例不變呢?即給定可變寬度的元素,它將確保其高度以響應的方式保持成比例(即,其寬度與高度的比率保持恒定)。下面以高寬 2:1 為例,通過2種方式來實現這種效果。

          js獲取屏幕以及元素寬高的方法

          網頁正文部分上:window.screenTop ,網頁正文部分左:window.screenLeft,屏幕分辨率的高:window.screen.height ,屏幕分辨率的寬:window.screen.width ,屏幕可用工作區高度:window.screen.availHeight

          通過js代碼來改變div的寬度

          當做網頁圖片的切換時,有的做法是將兩個div并排在一起,但是只能顯示一個div的寬度,當要切換圖片時將一個div的寬度從一個寬度值改為0,就實現了簡單的圖片替換了。 首先,我們將要更改寬度的div擺上來

          使用js如何設置、獲取盒模型的寬和高

          使用內聯樣式的元素的寬和高。瀏覽器渲染以后的元素的寬和高,無論是用何種方式引入的css樣式都可以,但只有IE瀏覽器支持這種寫法。計算一個元素的絕對位置(相對于視窗左上角)

          網頁中的各種上下左右寬高值

          offset只讀屬性。width/height——顯示出來的屏幕尺寸,top/left——相對于定位父元素的絕對位置.client只讀屬性。width/height——不帶邊框的offset,也不包含滾動條寬度top/left——內邊距的外邊緣與邊框外邊緣的距離,通常是邊框寬度

          JS中的offset

          一、offsetWidth與offsetHeight:獲取的是元素的實際寬高 = width + border + padding ,二:offsetLeft與offsetTop;offsetLeft:獲取自己左外邊框與父級元素的左內邊框的距離 ,offsetTop:獲取自己上外邊框與父級元素的上內邊框的距離

          js動態獲取瀏覽器或頁面等容器的寬高

          首先說一下js動態獲取瀏覽器或頁面等容器的寬高的方法大體有哪些,有時候我們寫了100%高度的時候,然后因為是當前頁面的子頁面,100%的只是父頁面,而子頁面有下拉條還有內容的話,一些東西就不能都獲取到。

          css保持div等高寬比

          那么css如何實現高度height隨寬度width變化保持比例不變呢?即給定可變寬度的元素,它將確保其高度以響應的方式保持成比例(即,其寬度與高度的比率保持恒定)。下面以高寬 2:1 為例,通過2種方式來實現這種效果。

          css中設置了寬度,div內容溢出不換行的的原因和解決方法

          當我們為div標簽聲明了寬度,文本內容為單詞或者純數字的時候會出現文本越界的情況。原因是由于:瀏覽器在解析我們頁面的時候,給這一串數字當成一個詞了,這樣就不會自動切斷字符串而進行換行。

          基于max-height實現不定高度元素的折疊/合并,展開/收縮的動畫效果

          基于實現元素的展開收縮,max-height,給定足夠大的高度,就是言義上的任意高度,相對height來說比較靈活,兩者的區別就是計算高度的過程,一個是由人為計算,一個由盒子內容高度去計算知識這種寫法必須給定足夠存放內容的高。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网