Question

我正在尝试显示一堆渲染为垂直和水平线条的div。虽然代码在技术上有效，但它不能始终如一地工作。在第一页加载时，只能显示一行，而下一行可能会显示完全不同的行，或者它们都会显示。我在IE8和IE9上测试了同样的问题，在这一点上有点迷失。

我正在使用ScriptManager.RegisterStartupScript(this, GetType(), "linesCode", script, false);注册脚本，但它使用旧的RegisterStartupScript(key, string)方法执行相同的操作。

正在注册的代码，从浏览器的“查看源代码”中提取：

<script type="text/javascript">
    $(document).ready(function () {
        drawLineVertical('MainContent_1_ClauseRowDefaultTable', 'MainContent_3_AddRowTable', 2, 30);
        drawLineHorizontal('MainContent_1_ClauseRowDefaultTable', 'MainContent_2_ConditionRowTable', 2, 40);
        drawLineHorizontal('MainContent_1_ClauseRowDefaultTable', 'MainContent_3_AddRowTable', 2, 30);
    });
</script>

正在处理的代码（大部分内容都发布在旧博文中）：

function drawLineVertical(id1, id2, wid, offset) {
    var obj1 = document.getElementById(id1);
    var obj2 = document.getElementById(id2);

    var obj1Pos = GetCoordinates(obj1);
    var obj2Pos = GetCoordinates(obj2);

    var id = 'line_' + new Date().getTime();
    var line = "<div id=\"" + id + "\" class=\"line\"></div>";
    $('body').append(line);
    $('#' + id).css({
        left: obj1Pos.x,
        top: obj1Pos.y,
        height: ((obj2Pos.y - obj1Pos.y) + offset),
        width: wid,
        position: 'absolute',
        background: '#c2c5d1',
        backgroundcolor: '#c2c5d1'
    });
}

function drawLineHorizontal(id1, id2, h, offset) {
    var obj1 = document.getElementById(id1);
    var obj2 = document.getElementById(id2);

    var obj1Pos = GetCoordinates(obj1);
    var obj2Pos = GetCoordinates(obj2);

    var id = 'line_' + new Date().getTime();
    var line = "<div id=\"" + id + "\" class=\"line\"></div>";
    $('body').append(line);
    $('#' + id).css({
        left: obj1Pos.x,
        top: (obj2Pos.y + offset),
        height: h,
        width: obj2Pos.x - obj1Pos.x,
        position: 'absolute',
        background: '#c2c5d1',
        backgroundcolor: '#c2c5d1'
    });
}

function GetCoordinates(obj) {
    var pos = {};
    pos.x = obj.offsetLeft;
    pos.y = obj.offsetTop;
    while (obj.offsetParent) {
        pos.x = pos.x + obj.offsetParent.offsetLeft;
        pos.y = pos.y + obj.offsetParent.offsetTop;
        if (obj == document.getElementsByTagName("body")[0]) {
            break;
        }
        else {
            obj = obj.offsetParent;
        }
    }
    return pos;
}

非常感谢任何输入。

IE不一致地渲染JavaScript div

0 个答案: