Bir HTML öğesinin gerçek genişlik ve yüksekliğini nasıl alabilirim?

Tarayıcı ekranında (viewport) ortalamak istediğim bir <div> olduğunu varsayalım. Bunu yapmak için, <div> öğesinin genişliğini ve yüksekliğini hesaplamam gerekiyor.

Ne kullanmalıyım? Lütfen tarayıcı uyumluluğu hakkında bilgi ekleyin.

Zach Lysobey
Edited question 2016ösp52ös17 Haziran 2016 в 5:52
Programlama
xhtml javascript html dhtml
2008ösp15ös19 Kasım 2008 в 7:15
38 görünümler
Çözüm

.offsetWidthve.offsetHeightözelliklerini kullanmalısınız. Bunların.style` öğesine değil, öğeye ait olduğunu unutmayın.

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

Yorumlar (11)

NOT: bu cevap 2008 yılında yazılmıştır. O zamanlar çoğu insan için en iyi çapraz tarayıcı çözümü gerçekten jQuery kullanmaktı. Gelecek nesiller için cevabı burada bırakıyorum ve eğer jQuery kullanıyorsanız, bunu yapmanın iyi bir yolu bu. Eğer başka bir framework ya da saf JavaScript kullanıyorsanız, kabul edilen cevap muhtemelen en iyi yoldur.

jQuery 1.2.6'dan itibaren çekirdek CSS fonksiyonları, height ve width (veya uygun şekilde outerHeight ve outerWidth) fonksiyonlarından birini kullanabilirsiniz.

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

var docHeight = $(document).height();
var docWidth = $(document).width();
tvanfosson
Edited answer 2016ööp3öö5 Ocak 2016 в 5:03
Yorumlar (0)

element.offsetWidth ve element.offsetHeight, önceki gönderide önerildiği gibi yapmalıdır.

Ancak, yalnızca içeriği ortalamak istiyorsanız, bunu yapmanın daha iyi bir yolu vardır. Xhtml strict DOCTYPE kullandığınızı varsayarsak. margin:0,auto özelliğini ve gerekli genişliği px cinsinden body etiketine ayarlayın. İçerik sayfanın ortasına hizalanır.

Yorumlar (1)