Bagaimana cara mengambil sebuah elemen HTML's aktual lebar dan tinggi?

Misalkan saya punya <div> yang saya ingin pusat di browser's display (viewport). Untuk melakukannya, saya harus menghitung lebar dan tinggi <div> elemen.

Apa yang harus saya gunakan? Harap sertakan informasi tentang kompatibilitas browser.

Zach Lysobey
Pertanyaan edit 17 Juni 2016 в 5:52
Pemrograman
xhtml javascript html dhtml
16 November 2008 в 7:15
47 tayangan
Mengomentari pertanyaan (1)
Larutan

Anda harus menggunakan .offsetWidth dan .offsetHeight properties. Catatan mereka termasuk elemen, tidak .gaya.

var width = dokumen.getElementById(&#39;foo&#39;).offsetWidth;

Komentar (11)

Lihatlah Element.getBoundingClientRect().

Metode ini akan mengembalikan sebuah objek yang berisi lebar, tinggi badan, dan beberapa nilai-nilai yang berguna:

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

Misalnya:

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

Saya percaya ini tidak memiliki masalah yang .offsetWidth dan .offsetHeight lakukan di mana mereka kadang-kadang kembali 0 (seperti yang dibahas dalam komentar di sini)

Perbedaan lain adalah getBoundingClientRect() dapat kembali pecahan piksel, di mana .offsetWidth dan .offsetHeight akan bulat ke bilangan bulat terdekat.

IE8 Catatan: getBoundingClientRect tidak kembali tinggi dan lebar pada IE8 dan bawah.*

Jika anda harus dukungan IE8, gunakan .offsetWidth dan .offsetHeight:

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

Untuk dicatat bahwa Objek yang dikembalikan oleh metode ini adalah tidak benar-benar normal objek. Sifat yang tidak enumerable (jadi, misalnya, Objek.tombol doesn't bekerja out-of-the-box.)

Info lebih lanjut tentang ini di sini: https://stackoverflow.com/questions/39417566/how-best-to-convert-a-clientrect-domrect-into-a-plain-object

Referensi:

Zach Lysobey
Jawaban edit 15 April 2018 в 9:21
Komentar (1)

CATATAN: jawaban ini ditulis pada tahun 2008. Pada saat yang terbaik cross-browser solusi bagi kebanyakan orang benar-benar adalah menggunakan jQuery. I'm meninggalkan jawabannya di sini untuk anak cucu dan, jika anda're menggunakan jQuery, ini adalah cara yang baik untuk melakukannya. Jika anda're menggunakan beberapa framework atau murni JavaScript jawaban yang diterima adalah mungkin cara untuk pergi.

Sebagai jQuery 1.2.6 anda dapat menggunakan salah satu inti CSS fungsi, tinggi dan lebar (atau outerHeight dan outerWidth, yang sesuai).

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

var docHeight = $(document).height();
var docWidth = $(document).width();
tvanfosson
Jawaban edit 22 Januari 2016 в 5:03
Komentar (0)

Hanya dalam kasus hal ini berguna untuk siapa pun, saya menempatkan kotak teks, tombol dan div dengan 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>

Saya coba di chrome, firefox dan ie-edge, saya mencoba dengan jquery dan tanpa, dan saya mencoba dengan dan tanpa box-sizing:border-box. Selalu dengan <!DOCTYPE html>

Hasil:

                                                               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
Komentar (4)

Menurut MDN: Menentukan dimensi-dimensi elements

offsetWidth dan offsetHeight kembali "total jumlah ruang elemen menempati, termasuk lebar terlihat konten, scrollbar (jika ada), padding, dan border"

clientWidth dan clientHeight kembali "berapa banyak ruang yang sebenarnya konten yang ditampilkan mengambil, termasuk padding tapi belum termasuk border, margin, atau scrollbar"

scrollWidth dan scrollHeight kembali "ukuran sebenarnya dari konten, terlepas dari berapa banyak dari hal ini yang terlihat saat ini"

Jadi, itu tergantung pada apakah diukur konten ini diharapkan akan keluar dari saat ini yang dapat dilihat.

HarlemSquirrel
Jawaban edit 4 April 2018 в 6:51
Komentar (0)

Anda hanya perlu menghitung untuk IE7 dan lebih tua (dan hanya jika konten anda tidak't memiliki ukuran tetap). Saya sarankan menggunakan HTML bersyarat komentar untuk membatasi hack untuk IEs tua yang don't mendukung CSS2. Untuk semua browser lainnya menggunakan ini:


    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;}

<div>test<br>test</div>

Ini adalah solusi sempurna. Itu pusat <div> dari berbagai ukuran, dan shrink-wrap itu untuk ukuran isinya.

Komentar (0)

Hal ini mudah untuk memodifikasi unsur-unsur gaya tapi agak sulit untuk membaca nilai.

JavaScript dapat't baca setiap elemen gaya properti (elem.gaya) yang berasal dari css(internal/eksternal) kecuali jika anda menggunakan dibangun dalam metode panggilan getComputedStyle dalam javascript.

getComputedStyle(elemen[, pseudo])

Elemen: elemen untuk membaca nilai.
pseudo: pseudo-elemen jika diperlukan, misalnya ::sebelum. String kosong atau tidak ada argumen berarti elemen itu sendiri.

Hasilnya adalah sebuah benda dengan gaya-sifat, seperti elem.gaya, tapi sekarang dengan hormat untuk semua kelas css.

Misalnya, di sini gaya tidak melihat margin:


   body { color: red; margin: 5px } 



  <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>

Modifikasi kode javaScript anda untuk memasukkan getComputedStyle dari elemen yang anda ingin mendapatkan itu's lebar/tinggi atau atribut lainnya

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);
    }

}

Dihitung dan nilai yang diselesaikan

Ada dua konsep dalam CSS:

dihitung nilai-nilai adalah nilai setelah semua aturan CSS dan CSS warisan diterapkan, sebagai hasil dari CSS cascade. Hal ini dapat terlihat seperti height:1em atau font-size:125%.

Yang diselesaikan gaya nilai yang akhirnya diterapkan ke elemen. nilai-Nilai seperti 1em atau 125% adalah relatif. Browser mengambil dihitung nilai dan membuat semua unit tetap dan mutlak, misalnya: height:20px atau font-size:16px. Untuk geometri sifat-sifat nilai yang diselesaikan mungkin memiliki floating point, seperti lebar:50.5 px.

Sebuah waktu yang lama lalu getComputedStyle diciptakan untuk mendapatkan dihitung nilai-nilai, tetapi ternyata bahwa nilai yang diselesaikan jauh lebih nyaman, dan standar berubah.
Jadi saat ini getComputedStyle benar-benar kembali teratasi nilai properti.

Harap Diperhatikan:

getComputedStyle memerlukan lengkap nama properti

Anda harus selalu meminta yang tepat properti yang anda inginkan, seperti paddingLeft atau tinggi atau lebar. Jika tidak benar hasilnya tidak dijamin.

misalnya, jika ada sifat paddingLeft/paddingTop, maka apa yang harus kita dapatkan untuk getComputedStyle(elem).padding? Apa-apa, atau mungkin yang "dihasilkan" nilai dari dikenal bantalan? Tidak ada standar aturan di sini.

Ada inkonsistensi lainnya. Sebagai contoh, beberapa browser (Chrome) menunjukkan 10px dalam dokumen di bawah ini, dan beberapa dari mereka (Firefox) – yang tidak boleh dilakukan:


  body {
    margin: 30px;
    height: 900px;
  }

<script>
  let style = getComputedStyle(document.body);
  alert(style.margin); // empty string in Firefox
</script>

untuk informasi lebih lanjut https://javascript.info/styles-and-classes

Komentar (0)

... tampaknya CSS membantu untuk menempatkan div di pusat ...


 .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;
 }



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

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

  </div>
 </div>
</div>
sanecin
Jawaban edit 1 Maret 2012 в 1:30
Komentar (0)

elemen.offsetWidth dan elemen.offsetHeight harus dilakukan, seperti yang disarankan di posting sebelumnya.

Namun, jika anda hanya ingin center konten, ada cara yang lebih baik untuk melakukannya. Dengan asumsi anda menggunakan xhtml strict DOCTYPE. mengatur margin:0 auto properti dan lebar diperlukan dalam px untuk tag body. Konten menjadi pusat selaras ke halaman.

Komentar (1)

jika anda perlu untuk pusat itu di browser's display port, anda dapat mencapai itu dengan CSS saja

yourSelector {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
Komentar (0)

anda juga dapat menggunakan kode ini:

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

var h = divID.style.pixelHeight;
Sergio
Jawaban edit 8 Juni 2014 в 4:21
Komentar (2)

Berikut ini adalah kode untuk WKWebView apa yang menentukan ketinggian tertentu elemen Dom (doesn't bekerja dengan benar untuk seluruh halaman)

let html = "<span id=\"spanEl\" style=\"font-family: '\(taskFont.fontName)'; font-size: \(taskFont.pointSize - 4.0)pt; color: rgb(\(red), \(blue), \(green))\">\(textValue)</span>"
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 {

        }
    }
}
Komentar (1)

Jika offsetWidth kembali 0, anda bisa mendapatkan elemen's gaya dan lebar properti pencarian untuk nomor. "100px" -> 100

/\d*/.exec(MyElement.gaya.lebar)

Komentar (0)