獲取html標籤的大小

Question

當我在Chrome中使用開發工具的鏈接時，我可以選擇任何標籤（在源代碼中），並顯示關於所選元素的信息（圖像如下）。我需要編寫腳本來完成相同的操作。我如何獲得源代碼中每個標籤的寬度和高度。任何想法？ 。

Answer 1

有這個可愛的getBoundingClientRect功能。不需要jQuery。適用於每個瀏覽器。

var rect = document.getElementById('foobar').getBoundingClientRect(); 

console.log(rect.width); 
console.log(rect.height); 
console.log(rect.left); 
console.log(rect.right); 
console.log(rect.top); 
console.log(rect.bottom); 

Answer 2

你知道嗎jQuery？有了這個庫，你可以檢索：

$('#element').innerWidth(); ---> width of #element's content + padding 
$('#element').width(); ---> width of #element including padding and borders 
$('#element').outerWidth(); ---> width of #element + padding + borders + margins 

的高度同樣的東西：

$('#element').innerHeight(); ---> height of #element's content + padding 
$('#element').height(); ---> height of #element including padding and borders 
$('#element').outerHeight(); ---> height of #element + padding + borders + margins