5

<input>内部でレンダリングされたテキストがラベルと同じベースラインを持っているかどうかを調べるテストを作成しようとしています:

ベースラインが強調表示された入力に隣接するラベル

これを行うために、各要素でレンダリングされたテキストのベースラインを計算し、2 つの値を比較したいと思います。これは可能ですか?可能であれば、どのように行われますか? そうでない場合、2 つの要素のベースラインが同じであることを確認するより良い方法はありますか?

確実に機能すると思われるラベルのベースラインを決定する方法を見つけました。

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>場合、スパンを挿入できないため、この方法は機能しません。

4

1 に答える 1

2

関数に基づいて計算されたベースラインを取得する方法を見つけました。トリックは、ラッパーを作成し、要素のすべてのスタイルをそれに適用することです。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);
}
于 2015-08-07T12:37:32.863 に答える