元素高度、寬度獲取 style currentStyle getComputedStyle getBoundingClientRect

阿新 • • 發佈：2019-01-02

1、示例程式碼

（1）html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js獲取寬度</title>
        <style type="text/css">
            #app{
                width: 300px !important;
            }
        </style>
        < 
link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <div id="app" style="width: 200px;">
            1
        </div>
        <script type="text/javascript">
            let app = document.getElementById('app')
            //不準確 只能獲取內斂樣式屬性值 

            console.log(app.style.width)
            //currentStyle:該屬性只相容IE（從IE6就開始相容了）,不相容火狐和谷歌
            // console.log(app.currentStyle.width)
            // getComputedStyle僅僅ie 6 7 8不支援
            console.log(window.getComputedStyle(app).width)
            // 返回300 單位是px。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的 

            console.log(app.getBoundingClientRect().width)
        </script>
    </body>
</html>

（2）css

#app{
    width: 100px;
}

2、方法區別

（1）dom.style.width

只能獲取內斂樣式。因此是不準確的。

（2）dom.currentStyle.width

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/currentStyle

Element.currentStyle 是一個與 window.getComputedStyle方法功能相同的屬性。這個屬性實現在舊版本的IE瀏覽器中。

（3）window.getComputedStyle(dom).width

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

Window.getComputedStyle()方法返回一個物件，該物件在應用活動樣式表並解析這些值可能包含的任何基本計算後報告元素的所有CSS屬性的值。因此輸出的值是準確的。

但是有相容性：

https://caniuse.com/#search=getComputedStyle

ie6-8不支援。

（4）dom.getBoundingClientRect().width

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

返回值是一個 DOMRect 物件，這個物件是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合。

DOMRect 物件包含了一組用於描述邊框的只讀屬性——left、top、right和bottom，單位為畫素。除了 width 和 height 外的屬性都是相對於視口的左上角位置而言的。

低版本的IE也有相容性問題：

https://caniuse.com/#search=getBoundingClientRect

有的瀏覽器不包含width和height屬性。

元素高度、寬度獲取 style currentStyle getComputedStyle getBoundingClientRect

1、示例程式碼（1）html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js獲取寬度</title>

Web APIs中螢幕（Screen）、視窗（Window）、元素（Element）中的高度、寬度、滾動條總結

1 screen // 螢幕：1440 * 900 screen.height // 1440 screen.width // 900 // 雙螢幕，根據主螢幕位置和工作列位置，值會變化 // 這裡，左側為主螢幕（1366 * 768），工作列垂直放置在主螢幕右側 screen.a

js中style,currentStyle,getComputedStyle和getBoundingClientRect的區別以及獲取css操作方法

js中style,currentStyle,getComputedStyle和getBoundingClientRect的區別以及獲取css操作方法在js中,之前我們獲取屬性大多用的都是ele.style.border這種形式的方法,但是這種方法是有侷限性的,該方法只能獲取到行內樣式,獲取不

原生JS 獲取非行間樣式寫法及 style currentStyle getComputedStyle 的區別

1，style：相容各大瀏覽器，獲取不了外部樣式,寫了行內沒有的樣式,返回的是空值 obj.style.attr(獲取樣式) obj.style.attr=“值” 設定屬性值 2，currentStyle:該屬性只相容IE,不相容火狐和谷歌 obj.curre

JS獲取當前頁面視窗高度、寬度

alert($(window).height()); //瀏覽器時下視窗可視區域高度 alert($(document).height()); //瀏覽器時下視窗文件的高度 alert($(document.body).height());//瀏覽器時下視窗文件body的高度

js設置body高度、寬度為瀏覽器窗口高度、寬度

() light true javascrip rip 窗口 scrip window gpo window.onload = () => { document.getElementsByTagName("body")[0].sty

JS 中各種對象的高度、寬度和距離

rop pseudo border text prop per create define 技術分享 1、各種對象 window.screen - 屏幕，window - 窗口，document.documentElement & document.body.par

css如何實現一個元素高度固定寬度按比例顯示？

用padding-top百分比可以實現寬度固定高度按比例展示，現在的需求是對一個video視訊的盒子div高度是固定的，寬度如何按比例展示？解決後效果如圖：紅框標註的即是我在上面高度比例固定的範圍內寬度自適應的效果； css程式碼： .content { margin: 0

二叉樹高度、寬度計算

二叉樹高度可以採用遞迴計算 public class TreeNode{ Data value; TreeNode left; TreeNode right; TreeNode(Data data,TreeNode left,TreeNode right) { this.

C# 字串換行、字串畫素高度、寬度的結構

//字串高度、寬，行數，及字串本身 public struct hhString { public string str; //處理後的字串 public int hSnumber; //共有幾行（插入多少個斷行符） public float wid

關於tab頁巢狀datagrid高度、寬度適應滾動條問題

如標題所示：就是我在tab頁面中嵌套了相應的頁面(B.jsp) B.jsp頁面中有datagrid列表進行展示，但是現在有個問題就是說，當我的datagrid列數比較多的時候，datagrid只有一條記錄的時候，會出現橫向滾動條會把那一條展示的記錄給覆蓋掉了，如果是多條記錄的話是不會出現這個問題因為網

二叉樹基本演算法，遞迴非遞迴遍歷以及求高度、寬度等

Html頁面視窗閃爍的一種常見原因--高度、寬度調整

　　　在Html頁面中經常會出現select元素，如果給select元素塞入的資料和我們指定給select元素所佔用顯示空間的高度和寬度有所差異的話，在某些情況下，例如和選單Div相配合的複雜頁面視窗系統中，頁面會出現抖動、閃爍現象。　　究其原因，大多在ie自動計算出來的

Javascript、Jquery獲取瀏覽器和屏幕各種高度寬度

pad post 屏幕分辨率 otto 方式刪除 javascrip block htm Javascript: IE中：document.body.clientWidth ==> BODY對象寬度document.body.clien

兼容獲取元素當前樣式 currentStyle || getComputedStyle

cti gets get .get dst func style win put function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] :

js、jq獲取屏幕的寬度和高度

scrollto adding scroll jquery java add query bsp javascrip Javascript: 網頁可見區域寬： document.body.clientWidth 網頁可見區域高： document.body.client

javascript中獲取dom元素的高度和寬度

javascript中獲取dom元素高度和寬度的方法如下：網頁可見區域寬： document.body.clientWidth 網頁可見區域高： document.body.clientHeight 網頁可見區域寬： document.body.offsetWidth (

Javascript、Jquery獲取瀏覽器和螢幕各種高度寬度

Javascript: IE中： document.body.clientWidth ==> BODY物件寬度 document.body.clientHeight ==> BODY物件高度 document.documentElemen

js獲取Html元素的實際寬度高度（offsetWidth）

第一種情況就是寬高都寫在樣式表裡，就比如#div1{width:120px;}。這中情況通過#div1.style.width拿不到寬度，而通過#div1.offsetWidth才可以獲取到寬度。第二種情況就是寬和高是寫在行內中，比如style="width:120px;

JavaScript / jQuery 同時設定單個/多個、獲取元素屬性值及設定style樣式

記錄一下用JavaScript原生程式碼以及jQuery 設定/獲取屬性的方法：（文章最下面有完整版程式碼）首先把JavaScript的奉上 function attribute() { var val=document.getElem

元素高度、寬度獲取 style currentStyle getComputedStyle getBoundingClientRect

相關推薦