Jak odzyskać rzeczywistą szerokość i Wysokość elementu HTML?

Załóżmy, że mam <div>, który chcę wyśrodkować w wyświetlaczu przeglądarki (viewport). Aby to zrobić, muszę obliczyć szerokość i Wysokość elementu <div>.

Czego powinienem użyć? Prosimy o dołączenie informacji na temat zgodności przeglądarki.

Author: Kamil Kiełczewski, 2008-11-16
Source

14 answers

Powinieneś użyć .offsetWidth oraz .offsetHeight właściwości. Zauważ, że należą do elementu, a nie .style.

var width = document.getElementById('foo').offsetWidth;

Funkcja .getBoundingClientRect() zwraca wymiary i lokalizację elementu jako liczby zmiennoprzecinkowe po wykonaniu transformacji CSS.

> console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}
 1377
Author: Greg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-04 19:17:25

Spójrz na Element.getBoundingClientRect().

Ta metoda zwróci obiekt zawierający width, height, i kilka innych przydatnych wartości: 

{
    width: 960,
    height: 71,
    top: 603,
    bottom: 674,
    left: 360,
    right: 1320
}

Na Przykład: 

var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;

Uważam, że nie ma to problemów, które .offsetWidth i .offsetHeight robią tam, gdzie czasami wracają 0 (jak omówiono w komentarze tutaj)

Inna różnica to getBoundingClientRect() może zwracać piksele ułamkowe, gdzie .offsetWidth i .offsetHeight zaokrąglą się do najbliższej liczby całkowitej.

IE8 Uwaga: getBoundingClientRect nie zwraca wysokości i szerokości na IE8 i poniżej.*

Jeśli musisz wspierać IE8, użyj .offsetWidth i .offsetHeight: 

var height = element.offsetHeight;
var width = element.offsetWidth;

Warto zauważyć, że obiekt zwracany przez tę metodę nie jest tak naprawdę obiektem normalnym . Jego właściwości nie sąenumerable (więc, na przykład, Object.keys nie działa po wyjęciu z pudełka.)

Więcej informacji na ten temat tutaj: jak najlepiej przekonwertować ClientRect / DomRect na zwykły Obiekt

Odniesienie:

 213
Author: Zach Lysobey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-15 21:21:05

Uwaga: odpowiedź ta została napisana w 2008 roku. W tym czasie najlepszym rozwiązaniem cross-browser dla większości ludzi było użycie jQuery. Zostawiam tutaj odpowiedź dla potomności i jeśli używasz jQuery, to jest to dobry sposób na to. Jeśli używasz innego frameworka lub czystego JavaScript, akceptowana odpowiedź jest prawdopodobnie najlepszym rozwiązaniem.

Od wersji jQuery 1.2.6 możesz używać jednej z podstawowych funkcji CSS, height i width (lub outerHeight i outerWidth, jako właściwe).

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();
 68
Author: tvanfosson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-22 05:03:15

Na wszelki wypadek, gdyby komuś się przydało, wstawiam textbox, button I div wszystkie z tym samym css: 

width:200px;
height:20px;
border:solid 1px #000;
padding:2px;

<input id="t" type="text" />
<input id="b" type="button" />
<div   id="d"></div>

Próbowałem w chrome, firefox i ie-edge, próbowałem z jquery i bez, i próbowałem z i bez box-sizing:border-box. Zawsze z <!DOCTYPE html>

Wyniki: 

                                                               Firefox       Chrome        IE-Edge    
                                                              with   w/o    with   w/o    with   w/o     box-sizing

$("#t").width()                                               194    200    194    200    194    200
$("#b").width()                                               194    194    194    194    194    194
$("#d").width()                                               194    200    194    200    194    200

$("#t").outerWidth()                                          200    206    200    206    200    206
$("#b").outerWidth()                                          200    200    200    200    200    200
$("#d").outerWidth()                                          200    206    200    206    200    206

$("#t").innerWidth()                                          198    204    198    204    198    204
$("#b").innerWidth()                                          198    198    198    198    198    198
$("#d").innerWidth()                                          198    204    198    204    198    204

$("#t").css('width')                                          200px  200px  200px  200px  200px  200px
$("#b").css('width')                                          200px  200px  200px  200px  200px  200px
$("#d").css('width')                                          200px  200px  200px  200px  200px  200px

$("#t").css('border-left-width')                              1px    1px    1px    1px    1px    1px
$("#b").css('border-left-width')                              1px    1px    1px    1px    1px    1px
$("#d").css('border-left-width')                              1px    1px    1px    1px    1px    1px

$("#t").css('padding-left')                                   2px    2px    2px    2px    2px    2px
$("#b").css('padding-left')                                   2px    2px    2px    2px    2px    2px
$("#d").css('padding-left')                                   2px    2px    2px    2px    2px    2px

document.getElementById("t").getBoundingClientRect().width    200    206    200    206    200    206
document.getElementById("b").getBoundingClientRect().width    200    200    200    200    200    200
document.getElementById("d").getBoundingClientRect().width    200    206    200    206    200    206

document.getElementById("t").offsetWidth                      200    206    200    206    200    206
document.getElementById("b").offsetWidth                      200    200    200    200    200    200
document.getElementById("d").offsetWidth                      200    206    200    206    200    206
 47
Author: Graham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-19 12:52:13

Zgodnie z MDN: określanie wymiarów elementów

offsetWidth i offsetHeight zwracają "całkowitą ilość miejsca zajmowanego przez element, w tym Szerokość widocznej zawartości, paski przewijania (jeśli występują), padding i border"

clientWidth and clientHeight return "ile miejsca zajmuje wyświetlana zawartość, w tym wypełnienie, ale bez obramowania, marginesów lub pasków przewijania"

scrollWidth i scrollHeight zwracają " rzeczywisty rozmiar zawartości, niezależnie od tego, ile jej jest obecnie widoczny "

Zależy więc od tego, czy zmierzona zawartość ma znajdować się poza bieżącym obszarem widocznym.

 20
Author: HarlemSquirrel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-04 18:51:49

Musisz tylko obliczyć to dla IE7 i starszych (i tylko jeśli zawartość nie ma stałego rozmiaru). Sugeruję użycie komentarzy warunkowych HTML, aby ograniczyć hack do starych IEs, które nie obsługują CSS2. Dla wszystkich innych przeglądarek użyj tego: 

<style type="text/css">
    html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
    body {display:table-cell; vertical-align:middle;}
    div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
To idealne rozwiązanie. Centruje <div> o dowolnej wielkości i kurczy się do wielkości jego zawartości.
 5
Author: Kornel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-16 20:57:23

Łatwo jest modyfikować style elementów, ale odczytanie wartości jest dość trudne.

JavaScript nie może odczytać żadnej właściwości stylu elementu (elem .style) pochodzące z css(wewnętrzne/zewnętrzne), chyba że użyjesz wbudowanej metody wywołania getComputedStyle w javascript.

GetComputedStyle (element[, pseudo])

Element: element do odczytu wartości.
pseudo: pseudo-element jeśli jest wymagany, na przykład:: before. Pusty ciąg lub nie argument oznacza sam element.

Wynikiem jest obiekt o właściwościach stylu, jak elem.stylu, ale teraz w odniesieniu do wszystkich klas css.

Na przykład tutaj styl nie widzi marginesu: 

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // now we can read the margin and the color from it

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

Tak zmodyfikowano kod javaScript, aby zawierał getComputedStyle elementu, który chcesz uzyskać jego szerokość/wysokość lub inny atrybut 

window.onload = function() {

    var test = document.getElementById("test");
    test.addEventListener("click", select);


    function select(e) {                                  
        var elementID = e.target.id;
        var element = document.getElementById(elementID);
        let computedStyle = getComputedStyle(element);
        var width = computedStyle.width;
        console.log(element);
        console.log(width);
    }

}

Obliczone i rozwiązane wartości

W CSS są dwa pojęcia:

A computed style wartość jest wartością po wszystkich regułach CSS i CSS dziedziczenie jest stosowane, w wyniku kaskady CSS. Może wyglądać / style = " height:1em; font-size:125%;" /

Rozwiązaną wartością stylu jest ta, która została ostatecznie zastosowana do elementu. Wartości takie jak 1em lub 125% są względne. Przeglądarka pobiera obliczone wartość i sprawia, że wszystkie jednostki są stałe i bezwzględne, np.: height: 20px lub font-size: 16px. Dla właściwości geometrii może mieć zmiennoprzecinkowy, jak / width = 50.5 px/

dawno temu getComputedStyle został stworzony do obliczania wartości, ale okazało się, że rozdzielone wartości są znacznie wygodniejsze, a standard uległ zmianie.
Tak więc obecnie getComputedStyle rzeczywiście zwraca rozwiązaną wartość właściwości.

Uwaga:

GetComputedStyle wymaga pełnej nazwy właściwości

Zawsze powinieneś poprosić o dokładną właściwość, jaką chcesz, jak paddingLeft lub wysokość lub szerokość. W przeciwnym razie poprawne wynik nie jest gwarantowany.

Na przykład, jeśli istnieją właściwości paddingLeft/paddingTop, to co powinniśmy dostać za getComputedStyle (elem).padding? Nic, lub może" wygenerowana " wartość ze znanych paddingów? Nie ma standardu rządzić tutaj.

Są inne niespójności. Na przykład niektóre przeglądarki (Chrome) pokazują 10px w dokumencie poniżej – a niektóre z nich (Firefox) - Nie: 

<style>
  body {
    margin: 30px;
    height: 900px;
  }
</style>
<script>
  let style = getComputedStyle(document.body);
  alert(style.margin); // empty string in Firefox
</script>

Dla więcej informacji https://javascript.info/styles-and-classes

 4
Author: Lekens,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-27 11:58:34

Element.offsetWidth i element.offsetHeight powinien zrobić, jak sugerowano w poprzednim poście.

Jeśli jednak chcesz wyśrodkować zawartość, istnieje lepszy sposób na to. Zakładając, że używasz XHTML strict DOCTYPE. Ustaw margin: 0, właściwość auto i wymaganą szerokość w px na znaczniku body. Zawartość jest wyrównywana do środka strony.

 2
Author: questzen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-11-16 19:50:32

... wydaje się, że CSS pomaga umieścić div na środku ...

<style>
 .monitor {
 position:fixed;/* ... absolute possible if on :root */
 top:0;bottom:0;right:0;left:0;
 visibility:hidden;
 }
 .wrapper {
 width:200px;/* this is size range */
 height:100px;
 position:absolute;
 left:50%;top:50%;
 visibility:hidden;
 }

 .content {
 position:absolute;
 width: 100%;height:100%;
 left:-50%;top:-50%;
 visibility:visible;
 }

</style>

 <div class="monitor">
  <div class="wrapper">
   <div class="content">

 ... so you hav div 200px*100px on center ...

  </div>
 </div>
</div>
 1
Author: sanecin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-01 01:30:01

Możesz również użyć tego kodu: 

var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;
 1
Author: Sergio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-08 16:21:18

Flex

W przypadku, gdy chcesz wyświetlić w <div> jakąś wiadomość wyskakującą na środku ekranu - wtedy nie musisz odczytywać rozmiaru <div> , ale możesz użyć flex 

.box {
  width: 50px;
  height: 20px;
  background: red;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  position: fixed; /* remove this in case there is no content under div (and remember to set body margins to 0)*/
}
<div class="container">
  <div class="box">My div</div>
</div>
 0
Author: Kamil Kiełczewski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-08-19 20:39:58

Użyj param szerokości w następujący sposób: 

   style={{
      width: "80%",
      paddingLeft: 100,
      paddingRight: 200,
      paddingTop: 30,
      paddingBottom: 30,
      border: "3px solid lightGray",
    }}
 0
Author: user1767599,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-02 17:56:43

Jeśli offsetWidth zwraca 0, możesz pobrać właściwość style width elementu i wyszukać w niej liczbę. "100px" - > 100

/ \d*/.exec (Węg.styl.Szerokość)

 -3
Author: Arko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-04 14:12:30

Oto kod WKWebView określający wysokość określonego elementu Dom (nie działa poprawnie dla całej strony) 

let html = "<body><span id=\"spanEl\" style=\"font-family: '\(taskFont.fontName)'; font-size: \(taskFont.pointSize - 4.0)pt; color: rgb(\(red), \(blue), \(green))\">\(textValue)</span></body>"
webView.navigationDelegate = self
webView.loadHTMLString(taskHTML, baseURL: nil)

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.getElementById(\"spanEl\").getBoundingClientRect().height;") { [weak self] (response, error) in
        if let nValue = response as? NSNumber {

        }
    }
}
 -4
Author: Aleksey Mazurenko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-31 11:52:38