我正在尝试编写一个测试来确定文本是否在 <input>
中呈现。与标签具有相同的基线:
为了做到这一点,我想计算每个元素中呈现的文本的基线并比较这两个值。这可能吗?如果可以,它是如何实现的?如果不是,是否有更好的方法来确定两个元素的基线相同?
我找到了一种方法来确定标签的基线,它似乎可以可靠地工作:
function getBaseline(element) {
var span = document.createElement("span");
span.setAttribute("style", "font-size:0");
span.innerText = "A";
jQuery(element).prepend(span);
return span.getBoundingClientRect().bottom;
}
但是,此方法不适用于 <input>
,因为在那种情况下我无法插入跨度。
最佳答案
我找到了一种根据您的函数获取计算基线的方法。诀窍是创建一个包装器并将元素中的所有样式应用到它。我可以确认它适用于 OSX 上的 Firefox (v38) 和 Chrome (v44)。不幸的是,它在 Safari 中无法正常工作。
function getBaseline(element) {
element = jQuery(element);
var span = document.createElement("span");
span.setAttribute("style", "font-size:0");
span.innerText = "A";
var wrapper = document.createElement("span");
applyCSSProperties.call(wrapper, element);
element.wrap(wrapper);
element.before(span);
var computed = span.getBoundingClientRect().bottom;
span.remove();
element.unwrap(wrapper);
return computed;
}
function applyCSSProperties(element) {
var styles = {};
var comp = getComputedStyle(element[0]);
for(var i = 0; i < comp.length; i++){
styles[comp[i]] = comp.getPropertyValue(comp[i]);
}
jQuery(this).css(styles);
}
关于javascript - 如何计算文本的基线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31874798/