Javascript定位在Chrome或Safari中不起作用

我有一个Javascript脚本，其目的是当窗口小于图像时，使图像保持在窗口中心。它只是将图像向左移动图像宽度和窗口宽度之差的一半，这样图像的中心始终是屏幕的中心。当窗口不小于图像时，此左偏移设置为零。如果我在IE或Firefox中，它工作得非常好。在webkit浏览器上，它永远不会变为零，当窗口比图像宽时，会产生类似于

float:right

的效果。代码如下：

setTimeout(slideImageWidth, 1);
function slideImageWidth() {
    var slideWidth = window.getComputedStyle(document.getElementById("slide-image")).width,
        windowWidth = window.innerWidth,
        slide = document.getElementById("slide-image"),
        slideWidth = window.getComputedStyle(slide).width;
    if (windowWidth < (slideWidth.replace("px", "") + 1) && slide.style.display !== "none") {
        slide.style.left = ((((-slideWidth.replace("px", "") + windowWidth)) / 2) + "px");
    }
    else {
        slide.style.left = 0;
    setTimeout(slideImageWidth, 1);
};

这些都不适用于Chrome或Safari，但除了最后一个，其他都适用于Firefox和IE

当我使用

alert（slide.style.left）

时，当窗口比图像宽时，Chrome和Safari中会返回一个正值，这与Firefox和IE中的0不同，后者告诉我0值永远不会写入

slide.style.left

。但是，我知道我可以修改

slide.style.left

，因为它仍然根据等式来定位自己

---

为什么这段代码不适用于webkit浏览器，我如何修复它？

首先，我认为是意外的打字错误：

1） 您的代码引用了一个名为“slide1Width”的东西，它在任何地方都没有定义。 2） 您的代码引用了一个名为“slide1”的东西，它在任何地方都没有定义。 3） 右括号的数目不正确，最后一个括号后面莫名其妙地有一个分号

其次，最明显的错误不是导致您的特定问题的原因：

(slideWidth.replace("px", "") + 1)

这个表达式不是你想要的。如果slideWidth是“440px”，则replace（）调用将给出“440”，并且（“440”+1）是字符串“4441”。我不认为这就是你在这里要做的

第三，也是最后一点，我认为是您所问的实际bug的原因：时间。如果在加载slideImageWidth（）后打开开发工具并在宽窗口上手动运行slideImageWidth（），并且无法将其自身居中，则图像实际上会跳转到中心，即使在Chrome上也是如此。为什么它在页面加载时不这样做？在这里：

window.getComputedStyle(slide).width

---

该表达式在第一次加载页面时返回“0px”。如果您等待图像加载完成，您将能够获得图像的实际宽度，在这种情况下，您可以进行所需的计算。（或者，您可以通过样式设置自己设置宽度。）IE似乎在运行脚本之前加载并流化了图像，而Chrome没有。是否有理由使用setTimeout而不是resize事件？像这样的东西怎么样：

window.onresize = function(event) {
    setSlidePosition();    
};

function setSlidePosition() {
    var slideLeft = (document.getElementById("slide-image").style.left.indexOf('px') != -1 ) ? document.getElementById("slide-image").style.left : '0px';

    var numLeft = slideLeft.replace('px','');

    console.log(numLeft);

    var element = document.getElementById("slide-image")

    if(element.width > window.innerWidth) {
        var newLeft = (element.width - window.innerWidth) / 2 * -1 + "px";
        document.getElementById("slide-image").style.left = newLeft;
    } else {
        document.getElementById("slide-image").style.left = "0px";
    }
};

setSlidePosition();

---

至少在chrome和FF中表现相同。这并没有明确回答与代码相关的问题，但是：/

请使用

setTimeout（slidemagewidth，1）

@AlienWebguy完成了，但它没有改变任何东西。它不是为了改变任何东西-只是避免在后台使用

eval（）

，这是一种主要的代码气味。你应该继续坚持这个惯例。哦，好吧。注意，谢谢。令人惊讶的是，+1是我的问题。FF和IE的读数为445，但Chrome和Safari的读数为4441。问题1是我复制时的一个打字错误（以为我删除了所有的1…）。修正了。

window.onresize = function(event) {
    setSlidePosition();    
};

function setSlidePosition() {
    var slideLeft = (document.getElementById("slide-image").style.left.indexOf('px') != -1 ) ? document.getElementById("slide-image").style.left : '0px';

    var numLeft = slideLeft.replace('px','');

    console.log(numLeft);

    var element = document.getElementById("slide-image")

    if(element.width > window.innerWidth) {
        var newLeft = (element.width - window.innerWidth) / 2 * -1 + "px";
        document.getElementById("slide-image").style.left = newLeft;
    } else {
        document.getElementById("slide-image").style.left = "0px";
    }
};

setSlidePosition();