如何查看HTML元素的基线？

Question

每个浏览器的devtools都会显示元素的内容，填充，边框和边距框。有没有办法让浏览器（任何浏览器）向我显示元素的基线？它有助于调试内联框对齐。

Answer 1

这完全没有回答你的问题，但我希望它至少可以某些使用......或者它甚至会激励某人想出一个更好的问题！

诀窍是a）计算基线的位置，b）使这些信息可用于所有元素。

计算基线的方法令人惊讶地非直截了当：我们必须创建两个元素，其中一个元素的字体大小为0，然后计算它们之间的顶部位置差异。
要将此计算放入所有HTML元素中，我们使用defineProperty方法将新属性添加到HTMLElement类的原型中。

＆＃13;

＆＃13;

// 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.');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这里需要注意的是，您需要一个能够显示HTML元素节点的所有属性的浏览器。到目前为止，我发现的唯一一个是SeaMonkey的DOM Inspector。

其他浏览器要么无法显示JavaScript节点属性，要么只显示内置属性，而不是用户添加的属性。

无论如何，希望这有点帮助！