javascript - 使用 Javascript 更改相对 div 的左侧位置在 firefox/chrome 中不起作用

Question

我在我的页面上运行了这个脚本，通过更改其“左”css 属性将 div 部分移出屏幕。如果页面请求包含查询字符串，它会在页面加载时发生:

     function pageLoad() {

        var isQueryRequest = isQueryPostback(); // check for query string

        if(isQueryRequest)
        {
            document.getElementById("container").style.left = -340;  // not working

            document.getElementById("selectorText").innerHTML = "<< Show Query View";
            document.getElementById("querySelector").onclick = slideOut;
        }
        else
        {
            document.getElementById("selectorText").innerHTML = "<< Hide Query View";
            document.getElementById("querySelector").onclick = slideIn;
        }
    }


    <div id="container" style="position:relative; left:30px;" >
       // contains other divs
    </div>

我已确认执行进入第一个 if block ，但该行未在 Firefox 或 Chrome 中执行。它在 IE 中执行得很好。 firebug看页面没有明显错误。

不知道它是否相关，但这在 .aspx 页面中运行。

编辑 - 下面的 slideIn() 和 slideOut():

  function slideOut() {

    var slidingDiv = document.getElementById("container");

    var stopPosition = 30;

    if (parseInt(slidingDiv.style.left) < stopPosition) {
        slidingDiv.style.left = parseInt(slidingDiv.style.left) + 28 + "px";
        setTimeout(slideOut, 1);
    }

    document.getElementById("selectorText").innerHTML = "<< Hide Query View";
    document.getElementById("querySelector").onclick = slideIn;  
  }

  function slideIn() {

    var slidingDiv = document.getElementById("container");
    var stopPosition = -340;

    if (parseInt(slidingDiv.style.left) > stopPosition) {
        slidingDiv.style.left = parseInt(slidingDiv.style.left) - 28 + "px";
        setTimeout(slideIn, 1);
    }

    document.getElementById("selectorText").innerHTML = "<< Show Query View";
    document.getElementById("querySelector").onclick = slideOut; 
  }

Answer 1

这可能会给你带来问题:

.innerHTML = "<< Show Query View";

避开那些小于号，因为它们可能呈现为 HTML，这会搞砸您的布局:

.innerHTML = "<< Show Query View";