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

【问题标题】：Changing left position of relative div with Javascript not working in firefox/chrome使用 Javascript 更改相对 div 的左侧位置在 firefox/chrome 中不起作用
【发布时间】：2011-05-02 17:56:06
【问题描述】：

我在我的页面上运行了这个脚本，它通过更改 'left' 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 块，但该行没有在 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; 
  }

【问题讨论】：

你能发布slideOut()和slideIn()函数吗？
刚刚意识到我可能需要包含“px”？
style.left 是在 px 中输出还是作为整数输出？我建议对这类东西使用 JavaScript 库（jQuery？），因为你有点通过手动动画来重新发明轮子。这是一件好事，但在许多情况下是不切实际的。
我想通了。 IE 接受您可以使用字符串文字设置 style.left，即 style.left = "30px" 或者您可以只使用 style.left = 30。Firefox/chrome 似乎只接受字符串文字，所以我更改了样式。 left = -340 到 style.left = "-340px" 就可以了。

标签： javascript asp.net css html

【解决方案1】：

这可能会给你带来问题：

.innerHTML = "<< Show Query View";

避开那些小于号，因为它们可能会呈现为 HTML，这会破坏你的布局：

.innerHTML = "&lt;&lt; Show Query View";

【讨论】：

【解决方案2】：

将值放在双引号中，例如：

{
....
.......style.left="300px";
....
}

【讨论】：