如何查看HTML元素的基線？

每個瀏覽器的devtools都會顯示一個元素的內容，填充，邊框和邊距框。有什麼辦法讓瀏覽器（任何瀏覽器）向我展示元素的底線？這對調試行內盒對齊將有很大的幫助。如何查看HTML元素的基線？

2016-07-31 Peeja

此問題似乎有負面投票和投票結束，但沒有解釋的評論。我能做些什麼來改善這個問題嗎？ – Peeja

的密切投票是「推薦一個工具」，所以，他們或許認爲你所要求的調試庫什麼的。 –

啊，不，我在問是否瀏覽器能夠顯示它。 – Peeja

這不會完全回答你的問題，但我希望它可以至少使用一些 ......或者它甚至會激勵某人想出一個更好的！

訣竅是a）計算基線的位置，b）使這些信息適用於所有元素。

計算基線的方法是令人驚訝的非直接的：我們需要創建兩個元素，其中之一具有字體大小0，然後計算它們之間的頂部位置的差。
爲了把這個計算到所有的HTML元素，我們使用defineProperty方法到一個新的屬性添加到HTMLElement類的原型。

// the main functionality 
 
Object.defineProperty(Element.prototype, 'baselinePosition', 
 
{ 
 
    get: function() { 
 
    var fs0 = document.createElement('span'); 
 
    fs0.appendChild(document.createTextNode('X')); fs0.style.fontSize = '0'; fs0.style.visibility = 'hidden'; 
 
    var fs1 = document.createElement('span'); 
 
    fs1.appendChild(document.createTextNode('X')); 
 
    this.appendChild(fs1); this.appendChild(fs0); 
 
    var result = fs0.getBoundingClientRect().top - fs1.getBoundingClientRect().top; 
 
    this.removeChild(fs0); this.removeChild(fs1); 
 
    return result; 
 
    }, 
 
    enumerable: true 
 
}); 
 

 
// and a test run. 
 
var pos = document.getElementById('test').baselinePosition; 
 
console.log('The baseline is at ' + pos + ' px.');

<p id="test">This is the test.</p>

這裏需要說明的是，你將需要一個瀏覽器，可以顯示HTML元素節點的所有屬性。到目前爲止，我發現的唯一一個就是SeaMonkey的DOM Inspector。

其他瀏覽器沒有任何顯示的JavaScript節點屬性的能力，或者他們只顯示了內置的，而不是在用戶添加的。

無論如何，希望這會有所幫助！

來源

2016-08-01 18:58:18

這是一個很好的把戲！我可能會使用它來添加將繪製基線的背景圖像漸變。 – Peeja

如何查看HTML元素的基線？

回答

相關問題