0

私は検証フレームワークの種類を作成しています。コンポーネントにエラーがある場合、ユーザーがマウスオーバーしたときにエラーを表示するテキスト ボックスを表示したいと考えています。そこで、まさにそれを行うメソッドを作成しました。問題は、正しい位置にそれを取得できないことです。動的に作成している最も外側の div の下部を、マウスが置かれている要素のすぐ上に配置したいと考えています。

function onMouseOverHandler(event) {
        var validationContent = document.createElement("div");
        validationContent.setAttribute("class", "validationErrorContent");
        for(var i = 0; i < this.validationErrors.length; ++i) {
            if(i > 0) {
                $(validationContent).append("<br>");
            }
            $(validationContent).append(this.validationErrors[i].message);
        }

        var validationDiv = document.createElement("div");
        validationDiv.setAttribute("class", "validationErrorDiv");
        validationDiv.setAttribute("id", "validationErrorDiv");
        validationDiv.appendChild(validationContent);
        $(validationDiv).offset({ top: $(this).offset().top - $(this).height(), left: $(this).offset().left + $(this).width() - 5});
        document.body.appendChild(validationDiv);
    }

この時点では validationDiv の高さが常に 0 であるため、これは機能しません。

誰かがそれを必要とする場合に備えて、関連する CSS も以下に示します。

 .validationErrorDiv {position: absolute; display: block;}
.validationErrorContent {position: relative; color: white; background: red; width: 150px;}
4

1 に答える 1

0

検証DIVには、常に1行のテキストが含まれます。したがって、次のように追加できますmin-height。

.validationErrorContent {
    position: relative;
    color: white; background: red;
    width: 150px; min-height: 1em;
}
于 2013-03-05T02:49:42.023 に答える